CSS Grid Practice Questions with Solutions

By /

Short Introduction

CSS Grid Layout is a powerful two-dimensional layout system that allows you to arrange elements into rows and columns with ease. Unlike Flexbox, which mainly works in one direction, CSS Grid controls both horizontal and vertical layouts simultaneously. It is commonly used for dashboards, image galleries, website layouts, pricing sections, and responsive web pages. In this chapter, you’ll practice CSS Grid Practice Questions through simple solved questions that are easy for beginners to understand.

Question 1: Create a Grid Container

Problem Statement

Write CSS to make a <div> a Grid container.

CSS Code

.container {    display: grid;}

Output

All child elements become grid items inside the container.

Explanation

  • display: grid; converts the container into a Grid container.
  • All direct child elements become grid items.
  • By default, items are arranged automatically.

Question 2: Create Two Equal Columns

Problem Statement

Write CSS to create two equal-width columns.

CSS Code

.container {    display: grid;    grid-template-columns: 1fr1fr;}

Output

The container displays two equal columns.

Explanation

  • grid-template-columns defines the number and size of columns.
  • 1fr means one fraction of the available space.
  • Both columns receive equal width.

Question 3: Create Three Equal Columns

Problem Statement

Write CSS to divide a container into three equal columns.

CSS Code

.container {    display: grid;    grid-template-columns: 1fr1fr1fr;}

Output

The container displays three equally sized columns.

Explanation

  • Three 1fr values create three equal columns.
  • The available space is divided evenly.
  • This layout is useful for cards and galleries.

Question 4: Add Space Between Grid Items

Problem Statement

Write CSS to add 20px spacing between all grid items.

CSS Code

.container {    display: grid;    grid-template-columns: 1fr1fr;    gap: 20px;}

Output

Each grid item has 20px space between neighboring items.

Explanation

  • gap adds spacing between rows and columns.
  • It replaces older margin-based spacing techniques.
  • The same value is applied to both rows and columns.

Question 5: Create Rows with Fixed Height

Problem Statement

Write CSS to create two rows, each 150px high.

CSS Code

.container {    display: grid;    grid-template-rows: 150px150px;}

Output

The container displays two rows, each with a height of 150px.

Explanation

  • grid-template-rows defines row heights.
  • Each value represents one row.
  • Fixed heights create consistent layouts.

Question 6: Create Four Equal Columns

Problem Statement

Write CSS to create four equal-width columns using CSS Grid.

CSS Code

.container {    display: grid;    grid-template-columns: repeat(4, 1fr);}

Output

The container displays four equally sized columns.

Explanation

  • repeat(4, 1fr) creates four equal columns.
  • repeat() reduces repetitive code.
  • 1fr divides the available space equally.

Question 7: Make a Grid Item Span Two Columns

Problem Statement

Write CSS to make a grid item occupy two columns.

CSS Code

.item {    grid-column: span2;}

Output

The selected grid item stretches across two columns.

Explanation

  • grid-column controls an item’s horizontal span.
  • span 2 makes the item cover two columns.
  • This is useful for headers, banners, and featured cards.

Question 8: Make a Grid Item Span Two Rows

Problem Statement

Write CSS to make a grid item occupy two rows.

CSS Code

.item {    grid-row: span2;}

Output

The selected grid item stretches across two rows.

Explanation

  • grid-row controls an item’s vertical span.
  • span 2 makes the item cover two rows.
  • This technique is often used in gallery layouts.

Question 9: Center Grid Items

Problem Statement

Write CSS to center all grid items horizontally and vertically inside their grid cells.

CSS Code

.container {    display: grid;    place-items: center;}

Output

All grid items appear centered within their respective grid cells.

Explanation

  • place-items is a shorthand for align-items and justify-items.
  • center aligns items both horizontally and vertically.
  • It simplifies grid alignment.

Question 10: Create a Responsive Grid

Problem Statement

Write CSS to create a responsive grid where each column is at least 200px wide.

CSS Code

.container {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}

Output

The number of columns automatically adjusts based on the available screen width.

Explanation

  • auto-fit automatically fits as many columns as possible.
  • minmax(200px, 1fr) sets a minimum width of 200px and allows columns to grow.
  • This creates responsive layouts without media queries.

Key Takeaways

  • display: grid; creates a Grid container.
  • grid-template-columns defines column layouts.
  • grid-template-rows defines row heights.
  • gap adds spacing between grid items.
  • repeat() simplifies repeated column or row definitions.
  • grid-column and grid-row allow items to span multiple columns or rows.
  • place-items centers content inside grid cells.
  • CSS Grid is ideal for creating responsive, two-dimensional layouts.

Frequently Asked Questions (FAQs)

1. What is CSS Grid?

CSS Grid is a two-dimensional layout system used to arrange elements into rows and columns.

2. Which property creates a Grid container?

Use:

.container {    display: grid;}

3. How do I create three equal columns?

Use:

.container {    grid-template-columns: repeat(3, 1fr);}

4. What does the gap property do?

The gap property adds spacing between rows and columns.

Example:

.container {    gap: 20px;}

5. How do I make a grid item span two columns?

Use:

.item {    grid-column: span2;}

6. What is minmax() used for?

minmax() defines a minimum and maximum size for grid tracks, making layouts responsive.

Example:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

7. Where is CSS Grid commonly used?

CSS Grid is commonly used for:

  • Website layouts
  • Dashboards
  • Image galleries
  • Pricing sections
  • Portfolio pages
  • Admin panels
  • Responsive card layouts
  • Landing pages

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top