<sectionid="description"> CSS Grid puede ser una manera fácil de hacer que su sitio sea más receptivo al usar consultas de medios para reorganizar las áreas de la cuadrícula, cambiar las dimensiones de una cuadrícula y reorganizar la ubicación de los elementos. En la vista previa, cuando el ancho de la ventana gráfica es de 300 px o más, el número de columnas cambia de 1 a 2. El área de publicidad ocupa la columna izquierda por completo. </section>
<sectionid="instructions"> Cuando el ancho de la ventana <code>400px</code> sea de <code>400px</code> o más, haga que el área del encabezado ocupe la fila superior completamente y el área del pie de página ocupe la fila inferior completamente. </section>
- text: 'Cuando la ventana <code>400px</code> es de <code>400px</code> o más, la clase de <code>container</code> debe tener una propiedad de <code>grid-template-areas</code> en la que las áreas de pie de página y encabezado ocupen las filas superior e inferior respectivamente, y el anuncio y el contenido ocupen las columnas izquierda y derecha de la fila central.'
testString: 'assert(code.match(/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi), "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.");'