CSS Grid is a new, simple way of laying out the content of your website or app. Some of the shining features of the system are that grids can adapt to make use of available space. They are also very fast and can allow content to overlap. The whole premise of Grid was built around solving the hacky layout problems developers have been dealing with in CSS.
To be fair, this problem has been partially addressed with frameworks like Bootstrap or Foundation. But you still need to add libraries, learn intricacies, and are constricted to the principles of those frameworks. CSS grid has many advantages over these frameworks/libraries. CSS Grid is simple, easy to pick up, and built right into the browser.
CSS Grid will be pushed to production and supported by default in Firefox and Chrome in March 2017. If you’re about to stop reading as you’ve been burned before on buggy first releases, it’s important to note Grid has been in development for around 5 years & has had major changes. These have happened behind browser flags so there was no impact to users.
Trying CSS Grid Now
Until March 2017, you can still try out Grid behind an experimental flag. In Chrome, navigate to chrome://flags and enable “Experimental web platform features”. You’ll need to re-launch Chrome and then you’ll be ready to go. This is also available in Opera (opera://flags) and Firefox (about:config and enable layout.css.grid.enabled flag). It’s also been available in IE since version 10, but IE10, IE11, & Edge use old syntax, so it’s best to try it in Chrome, Firefox, or Opera.
Let’s cover some basic terminology before jumping into code samples. If you’re familiar with Excel, the Grid terminology is fairly easy to understand.
Grid: Any element with the display property set to grid.
Line: Horizontal and vertical lines that define boundaries.
Cells: Space between 4 grid lines.
Tracks: The space between two parallel lines.
Gutter: Space between cells.
Area: The area between 4 grid lines. This can have any number of cells.
Starting out, you’ll just need to create a parent element with a few child elements.
<div class="square blue">Box 1</div>
<div class="square yellow">Box 2</div>
<div class="square red">Box 3</div>
<div class="square blue">Box 4</div>
<div class="square blue">Box 5</div>
<div class="square yellow">Box 6</div>
In the CSS, you’ll need to add display:grid to the parent element which identifies sets that element as a grid. You’ll need to set grid-template-columns and grid-template-rows, as these are needed to define your columns and rows. In this example, there would be two columns that each take up 25% and 50% of the grid & 3 rows with the first row having a height of 10px, the second row with a height of 50px, and the third row having a height of 100px.
grid-template-columns: 25% 50%;
grid-template-rows: 50px 50px 100px;
Now, add grid-column: 1 / span 2 to the blue class. This means it will span from the first gridline to the second. This concept can also be applied to rows and can create very detailed layouts. Notice how box 6 gets pushed to the next line.
grid-column: 1 / span 2;
Although these examples are just the tip of the iceberg of CSS Grid, there are so many more features and things you can do with this. You’re probably going to have to learn CSS Grid at some point in the future, but if it’s too early to use as your entire layout, you can still use Grid in different UI components. For more info about CSS Grid visit https://developer.mozilla.org/en-US/docs/Web/CSS/grid or visit Gridbyexample to see more CSS Grid examples.