Same same grid, but different

If I told you there are two types of grid container siblings, would you believe me? You should, because we have two similar ways to create a grid container.

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

The biggest difference between them is that ‘display: grid’ is a block container that expands to fill its parent, whereas ‘display: inline-grid’ flows inline with text and elements and shrinks or grows to fit the width of its contents.

Happy gridding!