CSS Grid Essentials: The Basics

source Gamma_Zephyr, via pixabay

This article serves as an introduction to CSS Grid, a helpful styling tool that enables programmers to design web pages specifically via rows and columns. Grid is often compared with Flexbox, another CSS tool that styles web page items in a single direction. CSS Grid, on the other hand, can more explicitly position a web page’s elements in two dimensions, without having to use floats and positioning. Flexbox and grid are very powerful when used in conjunction with one another, and their usage is dependent on their application. If you are not familiar with Flexbox, click here to learn more.

Today we will play around with styling HTML div elements using grid. We’ll start with just the HTML and no styling.

<div class="container">
    <div>Abba</div>
    <div>Bob Marley</div>
    <div>Charli XCX</div>
    <div>Diana Ross</div>
    <div>Erykah Badu</div>
    <div>Frank Ocean</div>
    <div>George Harrison</div>
    <div>Hank Williams</div>
    <div>Iggy Pop</div>
</div>

Figure 1: Page Layout Before CSS Applied

The code above represents nine artists inside their respective div elements before styling is applied. In order for a grid to be applied to the elements, they must be children of a parent container. To arrange our artists into a grid, the CSS code (below) will be applied.

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px 100px;
}
.container div{
    border: black solid 2px;
}

Figure 2: Applying CSS Grid To Container Items

In the CSS (above), we are first specifying the display property with the value of grid. This is what gives us access to the powers of CSS Grid. The property below that, grid-template-columns, defines the width and number of column lines in a grid layout. The four vertical lines numbered 1, 2, 3, and 4 were created by giving the value 1fr 1fr 1fr. This syntax specifies that we want to create 3 column tracks that each occupy one fraction of the available space allotted by the container size. grid-template-rows works the same way, but with the specification of the lines that create the row tracks instead of columns. The 100px 100px 100px explicitly sets the vertical distance between the row lines 100px.

.container{
    display: grid;
    grid-template-columns: 40% 40%;
    grid-template-rows: 100px 100px auto;
    border: black solid 2px;
}
.container div{
    border: black solid 2px;
}

Figure 3: Applying More CSS Grid To Container Items

Building off the previous example, we now definegrid-template-columns with the values of 40% and 40%. This syntax creates two column tracks that combined occupy 80% of the available horizontal space of the provided container. For grid-template-rows the first two values of 100px are the same, but the third value is set as auto. This implicit value tells the remaining items to automatically fill the remaining space of the container.

.container{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 20px;
    border: black solid 2px;
    height: 400px;
}
.container div{
    border: black solid 2px;
}

Figure 4: Grid With Gap

The example (above) introduces the grid-gap property, adding a 20px gap in between the items. Also note that the grid-template-columns values are now 1fr 2fr 1fr, increasing the width of the center column track to double the width of the other two column tracks. The height of the container was also increased to 400px to better visualize these changes.

The last section of this post will illustrate how to shape the child items into the parent container’s grid using the column and row line numbers.

Figure 5: Using Grid-Column and Grid-Row

Figure 6: Explicitly Defining Item Shape Using Column and Row Line Numbers

In this final example, we built a more customized grid design. Not all of the items are the same shape. To do this we utilize the line numbers described in Figure 2. grid-column: 1/3 describes a box that starts at the first column line and ends at the third column line. grid-row: 1/2 describes a box that starts at the first row line and ends at the second row line. This syntax allows programmers to style their web-pages with control. PRO TIP: the Dev Tools grid display will show the grid lines when you inspect the page! This can be seen below.

Sources:

CSS Grid Layout

Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

A Complete Guide to Grid | CSS-Tricks