CSS GRID

CSS Grid is a two-dimensional grid-based layout system, used for designing user interface systems. CSS has always been used for the web page designs and creating layouts. Initially there were tables, then floats, positioning etc. But all these methods were lacking few important functionalities. Grid comes as the first CSS module that solves the layout problems in the most efficient way. Although Flex is also great, but its one-directional flow has different view cases.

To get started with Grid you need to define a container with display:grid, which makes it a grid. Then define the row and column sizes using grid-template-columns and grid-template-rows.

Grid Container

Grid container is the element on which display:grid is applied. This container is the parent of all the grid items. Let's have a look at an example:

.grid {
  display:grid;
}

Output:

Grid Display

The Grid display property defines the element as a grid container. Here are the value for this property:

• grid - creates a block-level grid
• inline-grid - creates a inline-level grid

Display Grid

It creates a block-level grid. Here's an example:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
}
.grid > .column {
  border: 4px solid blue;
  height: 100px;
  text-align: center;
}

Output:

Display Inline Grid

It creates an inline-level grid. Here's an example:

.inline-grid {
  display:inline-grid;
  grid-template-columns: auto auto auto auto;
}

Output:

Rows and Columns in Grid

Rows and columns size can be managed using grid-stemplate-rows & grid-template-columns. Let's have a look:

grid-template-columns

grid-template-columns property accepts a list of space seperated values. The values represent the track size of columns. Let's check an example:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
}

In the above example all four values are auto, which means that all grid items will have equal widths. Here's how it will look like:

Output:

grid-template-columns can have values in px or % as well:

.grid {
  display:grid;
  grid-template-columns: 100px 50px 20% 50px;
}

Output:

The value can be a fraction of the free space in the grid (represented by fr unit):

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 3fr 1fr;
}

Output:

grid-template-rows

grid-template-rows property accepts a list of values, like grid-template-columns. The values represent the track size of rows. Here's an example:

.grid {
  display:grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 60px 150px;
}

Output:

Grid Gaps

Gaps inside the grid rows & columns can be adjusted using the grip gap properties.

Output:

Following properties are used for adjusting spaces:

• row-gap
• column-gap
• gap
• grid-gap

gap property is the shorthand for row-gap & column-gap. Here's an example:

.grid {
  display:grid;
  grid-template-columns: 1fr 4fr 1fr 1fr;
  /* gap: <grid-row-gap> <grid-column-gap> */
  gap: 35px 20px;
}

Output: