<sectionid="description"> Puede usar unidades absolutas y relativas como <code>px</code> y <code>em</code> en CSS Grid para definir el tamaño de las filas y columnas. También puede usar estos: <code>fr</code> : establece la columna o fila a una fracción del espacio disponible, <code>auto</code> : establece la columna o fila al ancho o alto de su contenido automáticamente, <code>%</code> : ajusta la columna o fila al ancho de porcentaje de su envase. Aquí está el código que genera el resultado en la vista previa: <blockquote> rejilla-plantilla-columnas: auto 50px 10% 2fr 1fr; </blockquote> Este fragmento crea cinco columnas. La primera columna es tan ancha como su contenido, la segunda columna es 50px, la tercera columna es el 10% de su contenedor, y para las dos últimas columnas; El espacio restante se divide en tres secciones, dos se asignan para la cuarta columna y una para la quinta. </section>
- text: '<code>container</code> clase <code>container</code> debe tener una propiedad de <code>grid-template-columns</code> que tenga tres columnas con los siguientes anchos: <code>1fr, 100px, and 2fr</code> .'
testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.");'