In this tutorial, we are going to create a basic CSS Grid layout using display: inline-block. inline-block is a great tool to use when you need items to display next to each other with good browser support. While inline block elements layout similar to inline (text) elements, they respect padding and margins like a block element.
Step 1: Create the grid items
Before we can layout anything, we need to write the markup for our grid. In this case, I’m using simple <div> tags to create colored blocks for demo purposes, but you could be using anything you want. Could be images, nav links, etc. Place all the items on the same level under a <div class="container">
<html>
<head>
<title>CSS Grid inline-block</title>
<meta charset="utf-8">
<style>
.container {
width: 80%;
margin: 0 auto;
}
.grid-item {
width: 200px;
height: 200px;
}
.green {
background-color: darkgreen;
}
.red {
background-color: tomato;
}
.blue {
background-color: cornflowerblue;
}
.purple {
background-color: violet;
}
.orange {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item green"></div>
<div class="grid-item red"></div>
<div class="grid-item blue"></div>
<div class="grid-item green"></div>
<div class="grid-item red"></div>
<div class="grid-item orange"></div>
<div class="grid-item green"></div>
<div class="grid-item purple"></div>
<div class="grid-item green"></div>
</div>
</body>
</html>
Step 2: Turn it into a grid!
The crucial step! Let’s turn this random stack of blocks into a responsive grid. To do that on a basic level, just add display: inline-block to the .grid-item class.
.grid-item {
display: inline-block;
width: 200px;
height: 200px;
}
A basic grid! But it has some issues. Firstly, there is a little space between all the items for no reason. Secondly, the items always tend toward the right side of the screen. Wouldn’t it be nice if they kept themselves centered?
Step 3: Make it better & hack it!
The spacing issue is an issue that can be solved with font-size. Since inline-block elements behave like text, they space themselves out if the font-size is greater than 0. This is easy to fix. Set font-size: 0; on the .container. Just be sure to reset it in .grid-item so we can still display text in them if necessary.
.container {
width: 80%;
margin: 0 auto;
font-size: 0;
}
.grid-item {
display: inline-block;
width: 200px;
height: 200px;
font-size: 1rem;
}
Another thing you might want to change is centering the blocks. Since inline elements are normally text, inline-block elements actually respect the text-align property. text-align: center; on .container will center the blocks.
.container {
width: 80%;
margin: 0 auto;
font-size: 0;
text-align: center;
}
A final issue you may notice if your items are not all the same vertical size is that the blocks line up at the bottom, not the top or middle. This can be changed with vertical-align: top; (use middle instead if desired)
.grid-item {
display: inline-block;
width: 200px;
height: 200px;
font-size: 1rem;
vertical-align: top;
}
Step 4: Customize and finish!
At this point, the grid is pretty much complete. You may wish to add some margin or padding to your blocks. They should now respect it perfectly, so go ahead and do that. Enjoy the finished grid! Finished code below.
<html>
<head>
<title>CSS Grid inline-block</title>
<meta charset="utf-8">
<style>
.container {
width: 80%;
margin: 0 auto;
font-size: 0;
text-align: center;
}
.grid-item {
display: inline-block;
width: 200px;
height: 200px;
font-size: 1rem;
vertical-align: top;
margin: 5px;
}
.green {
background-color: darkgreen;
}
.red {
background-color: tomato;
}
.blue {
background-color: cornflowerblue;
}
.purple {
background-color: violet;
}
.orange {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item green"></div>
<div class="grid-item red"></div>
<div class="grid-item blue"></div>
<div class="grid-item green"></div>
<div class="grid-item red"></div>
<div class="grid-item orange"></div>
<div class="grid-item green"></div>
<div class="grid-item purple"></div>
<div class="grid-item green"></div>
</div>
</body>
</html>