CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. -w3schools.com

Background

Prior to CSS web developers faced a lot of challenges when designing a layout with HTML and CSS. Tables were used early on but are not responsive. Floats were created to allow content to be aligned on the pages more easily. Floats have trouble with content overflowing outside their container especially on different size viewports. Bootstrap was created to assist with layout design and responsiveness but requires JavaScript to physically change or move the markup. Flexbox was another solution which simplifies the alignment of items on the page, but all these solutions are focused on the content-out rather than the layout-in. CSS Grid, adopted by most modern browsers in 2017, is the first method which can simply move content around different size viewports without altering the HTML markup and can construct the content two-dimensionally.

Learn How To Implement CSS Grid⤍

How To Implement CSS Grid

  1. Define the grid
    1. Apply display: grid to the container
    2. Define grid-template-columns
    3. Define grid-template-rows
    4. Use grid-gap property for space or gutters between cells
    5. Can use repeat() to define a pattern
  2. Place items in the grid by using grid-column and grid-row properties to set up areas (Note: if you don't assign them, the grid will automatically place them in the order they appear in the HTML markup)

<style>
.implementation-example {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: repeat(2, 1fr);
     grid-gap: .5em;
     justify-items: center;
     align-items: center;
}

#square1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

#square2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}

#square3 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}

#square4 {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
</style>

<div class="implementation-example">
     <figure id="square1">1</figure>
     <figure id="square2">2</figure>
     <figure id="square3">3</figure>
     <figure id="square4">4</figure>
</div>

1
2
3
4

Learn about the Named Method⤍

Named Method

The named method is a visual way to define your grid. Pages with a lot of content can easily become confusing when trying to manage the rows and columns of a grid. The named method helps offer a visual representation of your grid so that it is easier to read the code.

  1. Use grid-template-areas in the container
  2. Create a template with the content area names to visually map out the layout for your grid
  3. Layout grid-template-columns and grid-template-rows
  4. Assign grid area names to the grid items with the grid-area property

<style>
.named-example {
     display: grid;
     grid-template-areas: "box1 box1 box1"
                                      "box2 box3 box4"
                                      "box5 box6 box6";
     grid-template-columns: repeat(3 1fr);
     grid-template-rows: repeat(3, 1fr);
     justify-items: center;
     padding: 1em;
}

#box1 {
grid-area: box1; /*no " */
}

#box2 {
grid-area: box2;
}

#box3 {
grid-area: box3;
}

#box4 {
grid-area: box4;
}

#box5 {
grid-area: box5;
}

#box6 {
grid-area: box6;
}
</style>

1
2
3
4
5
6

How to approach responsive layouts with CSS Grid⤍

Responsive Layout Design Approach Using CSS Grid

CSS Grid is a powerful layout solution to problems that have been vexing web developers since the beginning of the Internet. With advancements in a variety of devices such as smartphones, tablets, small laptops like Chromebooks as well as large 4k displays it's never been more important to have a way for content to respond to the size of the viewport that is requesting content. With the help of CSS grid, a new workflow is needed to meet the demand of this assortment of screen sizes as well as aging web browsers that may not support CSS grid. To meet this challenge a new workflow with a mobile-first philosophy is highly encouraged by leaders such as Morten Rand-Hendriksen:

  1. Build a mobile-first layout without a grid
  2. Use that mobile-first layout as a fallback for all browsers
  3. Use the @supports media query to detect grid support
  4. At appropriate breakpoints create a layout with grid and grid-areas
  5. Explore new layouts to take advantage of wider viewports as technology advances

This project was designed and executed with these principles & techniques.

Sources & Project Information⤍