CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples !

CSS Grid Layout Tutorial for Beginners | Complete Guide with Examples !

Need a powerful tool to build multi-column layouts? CSS Grid Layout lets you design complex layouts with rows and columns using simple properties like `grid-template-rows` and `grid-template-columns`. This tutorial walks you through auto-placement, grid areas, and responsive designs. It works well alongside Flexbox for modern layouts.

Introduction

CSS Grid is a powerful layout system in CSS that allows you to create responsive, structured, and complex web layouts easily. In our earlier post, we explained CSS Display Property in detail. Here, we will focus specifically on 'display: grid'.

What is CSS Grid?

CSS Grid is a 2-dimensional layout system, meaning you can control both rows and columns. It gives you full control over placement and spacing.

To activate grid, you set:

on a container.

Basic Example of CSS Grid

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

• 'display: grid' sets the element as a grid container.
• 'grid-template-columns: auto auto auto' creates 3 equal-width columns.
• 'gap: 10px' adds space between grid items.

CSS Grid Properties (with Examples)

display

Defines the element as a grid container.

Values:

• grid: Creates a block-level grid container.
• inline-grid: Creates an inline-level grid container.

grid-template-columns

Defines the column sizes of the grid.

Values:

• length (e.g., 100px)
• percentage (e.g., 30%)
• fr unit (e.g., 1fr, 2fr)
• repeat() (e.g., repeat(3, 1fr))
• minmax() (e.g., minmax(100px, 1fr))
• auto

grid-template-rows

Defines the row sizes of the grid.

Values: Same as grid-template-columns.

grid-template-areas

Defines named grid areas for layout.

Values: String of area names in quotes.

grid-template

Shorthand for defining rows, columns, and areas.

Values: Combines grid-template-rows, grid-template-columns, and grid-template-areas.

grid-auto-columns

Specifies the size of implicitly created columns.

Values: auto, length, percentage, fr, etc.

grid-auto-rows

Specifies the size of implicitly created rows.

Values: Same as grid-auto-columns.

grid-auto-flow

Controls the direction in which auto-placed items flow.

Values:

• row (default)
• column
• row dense
• column dense

grid-column-start

Specifies the starting grid line for an item’s column.

Values:

• auto
• Line number (e.g., 2)
• span n (e.g., span 2)
• Named line (e.g., header-start)

grid-column-end

Specifies the ending grid line for an item’s column.

Values: Same as grid-column-start.

grid-row-start

Specifies the starting grid line for an item’s row.

Values: Same as grid-column-start.

grid-row-end

Specifies the ending grid line for an item’s row.

Values: Same as grid-column-start.

grid-column

Shorthand for grid-column-start / grid-column-end.

Values:

• 2 / 4
• span 2 / span 3

grid-row

Shorthand for grid-row-start / grid-row-end.

Values:

• 1/3
• span 2 / span 3

grid-area

Defines a grid item’s location using grid-row-start / grid-column-start / grid-row-end / grid-column-end or by area name.

Values:

• 1 / 2 / 3 / 4
• Area name (e.g., sidebar)

place-items

Shorthand for align-items and justify-items.

Values: center, start, end, stretch

place-content

Shorthand for align-content and justify-content.

Values: center, start, end, stretch, space-between, space-around, space-evenly

place-self

Shorthand for align-self and justify-self.

Values: center, start, end, stretch

justify-items

Aligns items inside their grid area along the inline (row) axis.

Values: start, end, center, stretch

align-items

Aligns items inside their grid area along the block (column) axis.

Values: start, end, center, stretch

justify-content

Aligns the whole grid within the container along the row axis.

Values: start, end, center, space-between, space-around, space-evenly, stretch

align-content

Aligns the grid within the container along the column axis.

Values: Same as justify-content

justify-self

Aligns a single item along the row axis inside its grid area.

Values: start, end, center, stretch

align-self

Aligns a single item along the column axis inside its grid area.

Values: Same as justify-self

row-gap / column-gap / gap

Defines spacing between rows and columns.

Values:

• length (e.g., 20px)
• percentage
• gap: row-gap column-gap; (shorthand)

Conclusion

CSS Grid is a clean and modern way to build complex layouts without using floats or positioning. With the grid system, you can control alignment, spacing, and structure in a powerful and responsive way.

Take time to practice, and combine grid with media queries for a full responsive experience.

Suggested Posts:

• HTML div and span Tag Explained with Examples - Complete Guide
• CSS Padding Explained with Examples | CSS Box Model Guide
• CSS Text Formatting Properties Explained with Examples | Master Text Styles in CSS
• CSS background-color Tutorial with Examples - Learn Easily

Related Topics:

• CSS Flexbox Tutorial: Master CSS Display Flex Property with Examples
• CSS Display Property Explained with Examples | Block, Inline, Flex, Grid

Frequently Asked Questions (FAQs)

What is the difference between Flexbox and Grid?

• Flexbox is one-dimensional (row or column).
• Grid is two-dimensional (row 'and' column).

Can I use Grid with Flexbox?

Yes, you can use Grid for the main layout and Flexbox inside grid items for alignment.

Is CSS Grid supported in all browsers?

Yes, it is well supported in all modern browsers (Chrome, Firefox, Edge, Safari).