CSS Grid Container

CSS Grid is a layout system that allows you to arrange elements in rows and columns—much like a table, but in a more flexible and modern way.

When you want to make a basic element (such as a <div>) into a grid, you want to use a grid container.

display: grid

If you write:

.container {
  display: grid;
 }

then this means:

  • You’ve made that element a Grid Container.
  • Now, the child elements within it (its direct children) become Grid Items.
  • You can define rows and columns to specify where and how these items will be placed.

Example:

Suppose there’s a box with six smaller boxes (divs).

When you apply display: grid to the parent, those six divs are arranged in a grid—like a matrix (row-column structure).

display: inline-grid

This works in the same way as display: grid;

.container {
  display: inline-grid;
 }

the only difference is this:

  • display: grid → The element is block-level (occupies the entire line).
  • display: inline-grid → The element is inline-level (occupies only the size of its content, like inline-block).

example:

If you want a grid but it doesn’t occupy the entire line (like inline elements behave), then you use inline-grid.

Rows and Columns

After creating the grid, you now decide:

  • How many rows you want.
  • How many columns you want.
  • What size they will be.

For this, use:

  • grid-template-rows: Defines the size of rows.
  • grid-template-columns: Defines the size of columns.

grid-template-rows (to define rows)

This property specifies the height of each row.

.container{
    display:grid;
    grid-template-rows: 100px 200px;
}

Meaning:

  • First row height 100px
  • Second row height 200px
  • If there are additional elements, they will automatically appear in the third row (if available).
  • The number of rows you enter will be the same as the number of values ​​you specify.

grid-template-columns (to define columns)

This property defines the width of columns.

Example:

.container{
      display:grid;
      grid-template-columns: 100px 200px 300px;
 }

Means:

  • First column 100px wide
  • Second column 200px wide
  • Third column 300px wide
  • If you place 6 items then:
    • The first 3 items will appear in the first row
    • The next 3 items will appear in the second row (the grid will automatically create the next row).

Understand Units (for specifying row/column sizes)

When writing sizes in a grid, you can use different units—mainly two types:

1. Absolute Units: These are fixed sizes—do not change, regardless of screen size.

Common absolute units:

  • px (pixels)
  • em (relative to font size, but feels fixed)

Example:

grid-template-columns: 200px 200px;

Means: Both columns will be 200 pixels wide—fixed.

2. Relative Units: These are flexible—adjust according to the screen size.

Common relative units:

  • % (percentage)
  • fr (fraction)

% (percentage)

This is done in respect of the total width of the container.

Example:

grid-template-columns: 50% 50%;

Meaning both columns will take up half of the total width.

If the container is 1000px wide:

  • Every column will be 500px wide.

fr (fraction)

This is the most important and powerful unit in the Grid.

It divides the size on the basis of “fraction of available space”.

Example:

grid-template-columns: 1fr 2fr;

Means:

  • Divide the total space into 3 parts (1 + 2 = 3).
  • First column will take 1 part.
  • Second column will take 2 parts.
  • If the total width is 900px:
  • First column = 300px (1 part)
  • Second column = 600px (2 parts)
  • The free space is automatically divided—this is very useful in responsive design.

📣 Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel
Scroll to Top