Grid Container


🔹 What is a Grid Container?

A Grid Container is the parent element in a CSS Grid layout. When you set display: grid (or display: inline-grid) on an element, it becomes a grid container, and its direct child elements become grid items.

The grid container defines the structure of the grid, including columns, rows, spacing, and alignment.


🔸 Declaring a Grid Container

.grid-container {
  display: grid; /* or inline-grid */
}
Example:
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

🔸 Key Properties of Grid Container

Property Description
display: grid Enables grid layout
grid-template-columns Defines the number and size of columns
grid-template-rows Defines the number and size of rows
gap or grid-gap Sets spacing between rows and columns
justify-items Aligns items horizontally within their cells
align-items Aligns items vertically within their cells
justify-content Aligns the entire grid horizontally within the container
align-content Aligns the entire grid vertically within the container
grid-auto-flow Controls how auto-placed items are inserted

🔸 Basic Grid Container Example

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 20px;
}

This creates a 2×2 grid with a 20px gap between items.


🔸 Inline Grid Example

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

This behaves like an inline element while keeping grid behavior.


🔸 Responsive Grid with Auto-Fit

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

This creates a responsive container that adjusts column count based on screen width.


Practice Questions

✅ Write CSS for the following:

Q1. Create a grid container with 3 equal columns.

Q2. Add 15px spacing between grid rows and columns.

Q3. Define 2 rows with fixed height and 2 flexible columns.

Q4. Make a responsive grid with auto-fit and minmax.

Q5. Center all items inside the container using alignment properties.

Q6. Create a grid container that uses inline-grid.

Q7. Set grid-auto-flow: column; to fill items column-wise.

Q8. Apply different alignment for items inside cells.

Q9. Set the grid container to 100% height and vertically center its items.

Q10. Add a background color to grid items for better visibility.


Go Back Top