The long-awaited CSS Grid Layout dropped in March 2017 bringing a more robust front-end layout tool for web design. The code is extremely intuitive and powerful, making challenging layouts that could only be possible with frameworks and hacks,  easily doable with just a few lines of CSS.

Unlike Flexbox, CSS Grid Layout allows for both horizontal rows and vertical columns — called ‘tracks’ — in one layout. These ‘tracks’ provide the direction content will flow. The tracks are fluid, so content can wrap dynamically depending on the screen size without the use of media queries.

Some will compare CSS Grid Layout to the early days of the web when layout was accomplished with tables. But it is not really that strict and allows for much more flexibility. For me, it is similar to how layout is done in programs like Adobe InDesign — or even better — when layout was accomplished through the magical process called “paste-up.”

Let’s dive in and see how you can get started with columns and rows. To start, define a few boxes in HTML and give them a container to live in.

<div class="container">
 <div class="box">Grid Box 1</div>
 <div class="box">Grid Box 2</div>
 <div class="box">Grid Box 3</div>
 <div class="box">Grid Box 4</div>
 <div class="box">Grid Box 5</div>
 <div class="box">Grid Box 6</div>
 <div class="box">Grid Box 7</div>
</div>

Now, in CSS, set the container to “display grid. ” The default flow of content is for rows, so you will see each Grid Box in this example as a horizontal box.

.container {
 display: grid;
}

.box {
 background: #1f6d85;
 font-family: Arial;
 color: white;
 padding: 2rem;
 border: solid #0b4d60;
 border-radius: 10px;
}

To set up your rows and columns, use grid-template-columns and grid-template-rows. You can use any measurement unit: percentages, pixels, em/rem space or the new unit ‘fr’ .  ‘Fr’ stands for fraction and it divides the space evenly based on the window size making it a winner when you want to create a responsive grid. Finally, set the gap between the grid items using grid-gap.

.container {
 display: grid;
 grid-template-columns: 200fr 200fr 200fr;
 grid-template-rows: 5em 10em 5em;
 grid-gap: 1em;
}

.box {
 background: #1f6d85;
 font-family: Arial;
 color: white;
 padding: 2rem;
}

If you need to set one size gap between rows and another between columns you can use  grid-row-gap and grid-column-gapto set those properties individually. It is important to know the gap properties only set the space in between the grid items and do not affect the outer perimeter around the container. In this solution, the white space outside the boxes occurs when using the ‘fr’ unit. If you switch the column-template size to use percentages or pixels, the boxes on the right bleed off of the layout.

See what it looks like in action here. Try changing the gap and column units to see how things work. This is just a basic example of how CSS Grid Layout functions. Be sure to follow me for new layouts and snippets you can use to implement CSS Grid in your designs.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”NgWyXY” default_tab=”css,result” user=”iviolini”]See the Pen <a href=’https://codepen.io/iviolini/pen/NgWyXY/’>Basic CSS Grid Example — Implicit Grid</a> by Eileen Violini (<a href=’https://codepen.io/iviolini’>@iviolini</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]