• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

Grid Container

← Previous Next →

🔹 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.

Grid Container Quiz

Q1: Which property turns an element into a grid container?

A. layout: grid
B. display: grid
C. grid: container
D. position: grid

Q2: What does grid-template-columns: 1fr 2fr; mean?

A. Two columns: 1/3 and 2/3 of the space
B. Two columns of 1px and 2px
C. Grid with fixed-width columns
D. One column and one row

Q3: Which property sets spacing between all grid tracks?

A. margin
B. padding
C. gap
D. border-spacing

Q4: How do you make a responsive grid?

A. Use repeat(auto-fit, minmax())
B. Use width: 100%
C. Use display: flex
D. Add float to items

Q5: What does inline-grid do?

A. Makes grid container inline-block sized
B. Hides overflow
C. Makes grid vertical
D. Changes row direction

Q6: Which property aligns items inside each cell?

A. text-align
B. justify-items and align-items
C. float
D. grid-area

Q7: What does grid-auto-flow: column; do?

A. Places items by column instead of row
B. Auto sets column width
C. Disables responsiveness
D. Makes all columns equal height

Q8: How to center grid content vertically and horizontally?

A. Use justify-content and align-content
B. Use text-align: center
C. Use float: center
D. Use grid-position: center

Q9: Which is correct for setting both columns and rows?

A. grid-template: 100px 200px / 1fr 2fr;
B. template-grid: 1fr 2fr, 100px 200px
C. grid-rows-columns: ...
D. grid-all: rows-columns

Q10: Which is a valid way to create equal-width 4-column grid?

A. grid-template-columns: repeat(4, 1fr);
B. columns: 4;
C. grid: 1fr;
D. template: 4
← Previous Next →
Login
Go Back Top