Today we'll be experimenting with CSS Grid and see how easy it is to create a 12 column grid from scratch. If you've ever used a CSS framework before, most likely it came with some sort of grid system for quick and uniform layouts. With CSS Grid, it's super simple to create our own 12 column grid.
Here is a preview of the final product: http://cssgrid-demo.surge.sh/
Let's start off with some very basic html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
</head>
<body>
<div class="container">
<div class="grid-wrapper">
<div class="col-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p>
</div>
<div class="col-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p>
</div>
<div class="col-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit ultricies vehicula. Curabitur iaculis, risus vel egestas pellentesque, magna eros fermentum massa, et eleifend sapien purus id dui. Pellentesque consectetur imperdiet dui ac tristique. Nulla non egestas dui. Nulla semper diam est. Morbi tincidunt eros non nisi pretium vehicula. Integer semper vulputate sem eu molestie. Fusce aliquet viverra est, sit amet blandit nibh tristique commodo. Nulla eget elit in lacus luctus iaculis et in ipsum. Curabitur et consectetur sapien.</p>
</div>
</div>
</div>
</body>
</html>
This html structure should look fairly familiar if you've ever worked with a grid system in the past. The container can have a max-width applied or remain at 100% for a fluid layout. The grid-wrapper will start a section for our columns and the col-# represent the actual columns. If we want 3 identical columns, we'll need to use col-4 since this is a 12 column grid. The column numbers must add up to equal 12.
Now let's write the CSS and implement CSS Grid
.container {
padding: 0 1rem;
margin: 0 auto;
}
@media screen and (min-width: 992px) {
.container {
max-width: 1140px;
}
.grid-wrapper {
display: grid;
grid-gap: 0 2rem;
grid-template-columns: repeat(12, 1fr);
margin: 0 auto;
width: 100%;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
}
The CSS is mobile first, so any devices under 992px won't have the grid layout. As you can see, most of the magic happens in the .grid-wrapper class. Here we specify the grid-template-columns, which repeats 12 equal columns. The grid-gap is the space between the columns. We then create a class for each of the columns and tell them how many grid columns they should span.
I hope this snippet of code was useful in creating a quick grid layout without the use of a CSS framework. Feel free to customize and experiment with different grid columns and gap sizes!
Check out https://codebushi.com/ for more of my web development tips and resources.
Top comments (5)
Yes, I agree that this is a niche solution. I'm still experimenting with CSS grid and am still trying to wrap my mind around all that it can do. I've mainly used this in conjunction with an existing framework to replace their grid, not the entire layout. Thanks for the reference, I'll check that out on YouTube for sure!
ok, but what about IE 10 or 11?
I think IE 10 and 11 have partial CSS Grid support, so not all features will work. Here's an article about working with grid and those older browsers: medium.com/@elad/supporting-css-gr...
It's immensly important to know that in IE10 auto-placement isn't supported in grid, meaning you'd have to manually place every item.
To me, it's safer to build grid for the browsers that include full support and then include reasonable fallbacks for browsers that only partially support or don't support grid.
Even better to build the "fallback" first, then enhance with grid if @supports passes!
Well IE 10 to Edge use a different implementation of Grid, so this makes it pretty tricky. For example alignment and gutters don't even exist in those browsers. Additionally and more importantly Grid is only commercially useful under the right conditions.
Some maybe's could be:
Your website only attracts visitors that are likely to use very modern browsers. HackerNews? Dev.to? At 88%ish it's really playing with fire tbh.
I've recently read Webpack could allow a developer to create targeted CSS bundles for different browser types, thereby allowing you to the those not in 80s with Grid and those still watching Back to the Future with Tables and such.
Those are basically my two many thoughts on Grid compatibility. I'm no expert, but it's where I've settled for now.
Lastly a point I think about personally is that most sites are developed pre-Grid and so I still need to be developing those skills that I need day in and day out regardless of Grid's penetration due to the simple fact that even if I write a new site in 2 years using Grid I'm likely still needing to apply Grid against some legacy components and so even then my knowledge of those 'historical' specifications is still likely mote necessary thab Grid.
Ps. I'm learning Grid, but I just am in no rush to get to the finish line with it.