Checkout my Getting Started with React video course on Skillshare. It is 100% free.

How display inline-grid works in CSS and how is different from display grid

When we think about the display of an element in CSS we can see it from 2 points of view: how it relates to its children and how it relates to its siblings.

Let's say we want to build this small component:

The HTML would be like this:

<div class="box is-inline-grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

To get that 2 x 2 layout we can make it a grid:

.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4px;
}

Now if we want to put this grid in the same line with time inline elements, like some spans, we will not be able do to that. We will get something like this:

We get the above layout because if we set the element to display: grid we are saying something similar to "set this element to be a grid for its children, and to be a block to its siblings". Being a block to its siblings means that it will break the flow of the inline elements.

To make it so that it stays on the same line as the spans we will have to use the display: inline-grid.

This will say "set this element to be a grid for its children, but to be inline to its siblings" .

So the difference between display: grid and display: inline-grid is how they behave in relationship with their siblings. Both will serve as a grid container for their direct children.

Check out the full codepen for this example:

See the Pen
inline-grid 1
by JS Craft (@js-craft)
on CodePen.

By the way, the display inline-flex is the same for display flex.