--- layout: default title: Grid Layout Exercise comment: | Goal: Create a responsive two column grid layout with an inset Layout 1 + - - - - - - - - + | COLUMN | COLUMN | | +- - - - -+ | | | INSET | | | +- - - - -+ | | ONE | TWO | + - - - - - - - - + Layout 2 + - - - - + | ROW ONE | + - - - - + | INSET | + - - - - + | ROW TWO | + - - - - + Description: 1. The grid should have 4 columns and 3 rows, of even sizes 2. The inset should span * [25%, 75%] in the x direction * [33%, 67%] in the y direction 3. At widths < 600px, switch to Layout 2 * Row 1 [0, 33%] in the y direction * Inset [33%, 67%] in the y direction * Row 2 [67%, - ] in the y direction (with auto height) styleIncludes: - presets-02.css - ../resources/font.css scriptIncludes: - ../resources/feature-detect.js style: | --- {% include grid-container.html %}