CSS Responsive Grid View

What is a Grid-View?

A grid-view divides a page into rows and columns, and many web pages are built on one.

Responsive grid-views often use 6 or 12 columns, and they shrink and expand along with the browser window.

Building a Grid View

Before anything else, give every HTML element a box-sizing value of border-box. That way, an element's total width and height count its padding and border.

Place this rule at the top of your CSS:

Box-sizing reset

Thanks to the universal selector, every element on the page gets box-sizing: border-box.

styles.css 
* {
  box-sizing: border-box;
}

The HTML

The grid container holds five grid items: a header, a menu, main content, a facts section, and a footer.

Grid HTML structure

Here is the whole HTML of the grid layout. Every section has its own <div>, and its class name is what links it to a grid area.

index.html 
<div class="grid-container">

  <div class="header"><h1>Chania</h1></div>

  <div class="menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete.</p>
    <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
    <p>Chania lies along the north west coast of the island Crete.</p>
  </div>

  <div class="facts">
    <h2>Facts:</h2>
    <ul>
      <li>Chania is a city on the island of Crete</li>
      <li>Crete is a Greek island in the Mediterranean Sea</li>
    </ul>
  </div>

  <div class="footer"><p>A footer.</p></div>

</div>

The CSS

Styles and colors then improve the look of the grid layout.

Note: The next chapter shows how media queries and breakpoints handle different screen sizes.

Example

Here is the whole CSS of the grid layout. Named areas for each section come from grid-template-areas, while the header, menu, content, facts, and footer get their colors and spacing.

Prompt
Create a responsive grid layout page about the city of Chania. Use CSS Grid with named template areas for header, menu, main content, facts sidebar, and footer. Style with a purple header, blue menu items with hover effects, a facts box with a beige background and border, and a blue footer. Apply box-sizing: border-box to all elements.
Output: complete HTML page