Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
community creator

What are implicit and explicit grids in CSS?

Behzad Ahmad

Overview

The grid layout of CSS uses the concept of implicit and explicit grids. This is very important to remember when creating a grid; otherwise, we’d have many rows and columns that we didn’t expect.

Implicit grid

The grid container automatically generates the implicit grid when the grid items are positioned outside the explicit grid. The grid container creates implicit grid tracks by drawing implicit grid lines on the grid. These lines and the clear grid form the implicit grid.

Explicit grid

The explicit grid is defined with the help of grid-template-columns, grid-template-rows, and grid-template-areas properties. However, elements that don’t fit within a clearly defined grid are still possible. Let’s imagine we define a grid that can only hold six grid items, but the grid container holds nine grid items. Only six items will fit inside the defined grid, leaving three extra. The implicit grid takes place here.

Let’s have a look at the example to understand the concept.

Example

Explanation

HTML

  • Line 1-8: We’ve made a div and inside that div, we made six smaller divs.

CSS

  • Line 1-7: We’ve set the number of rows and columns of the grid and the distance between each grid item. There are two rows and two columns in this grid.

  • Line 8-13: We’ve set the padding and the grid’s background color.

We’ll explicitly create a grid with two rows and two columns. So, four grid items can fit in. But we have six grid items. So, to accommodate the remaining two items, the implicit grid is created.

RELATED TAGS

css
community creator
RELATED COURSES

View all Courses

Keep Exploring