• 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)

CSS Grid

← Previous Next →

🔹 What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system in CSS. Unlike Flexbox (which is one-dimensional), Grid lets you work with both rows and columns, making it perfect for building full-page layouts, dashboards, galleries, and complex web designs.

It allows developers to position elements precisely and create responsive layouts with less code.

🔸 Why Use CSS Grid?

  • Full control over rows and columns

  • Responsive design with fewer media queries

  • Gap management without margin hacks

  • Great for grid-based designs like galleries, cards, layouts, etc.

🔸 Basic Grid Syntax

HTML:
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
CSS:
.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}

This creates a 2-column grid with a 10px gap.

🔸 Main Grid Properties

Property Description
display: grid Defines the container as a grid
grid-template-columns Sets number & width of columns
grid-template-rows Sets number & height of rows
gap Space between rows and columns
grid-column / grid-row Position and span for grid items
grid-area Assigns a name to a section of the grid

🔸 Example: Fixed and Flexible Grid

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

🔸 Responsive Grid with repeat() and minmax()

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

This adjusts the number of columns based on available screen width.

Practice Questions

✅ Write CSS for the following:

Q1. Create a 3-column grid with equal-width columns.

Q2. Add a 20px gap between grid items.

Q3. Make a grid layout with 2 fixed columns and 1 flexible column.

Q4. Create a responsive grid using auto-fit and minmax().

Q5. Span a grid item across 2 columns.

Q6. Position one grid item in row 2, column 3.

Q7. Create a 2x2 grid layout.

Q8. Center all grid items horizontally and vertically.

Q9. Add different row heights using grid-template-rows.

Q10. Use grid-area to name and place layout sections.

CSS Grid Quiz

Q1: Which CSS value turns a container into a grid?

A. layout: grid;
B. display: grid;
C. grid: true;
D. type: grid;

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

A. Two fixed columns
B. First column takes 1 part, second takes 2 parts
C. One column spans two rows
D. No spacing

Q3: Which property sets spacing between columns and rows?

A. gap
B. spacing
C. margin
D. grid-spacing

Q4: What does repeat(3, 1fr) do?

A. Creates 3 equal columns
B. Adds 3 rows
C. Sets 3 row gaps
D. Hides extra columns

Q5: Which function creates responsive grid columns?

A. flex-grow()
B. minmax()
C. auto-column()
D. resize()

Q6: How do you place an item in a specific column and row?

A. place: 2 3;
B. grid-column: 3; grid-row: 2;
C. position: grid(2,3);
D. location: cell(2,3);

Q7: Which value of grid-template-columns creates flexible columns?

A. 1fr
B. auto
C. px
D. grid-auto

Q8: What does grid-area do?

A. Makes a grid responsive
B. Assigns a name to a grid section
C. Adjusts spacing
D. Removes gaps

Q9: What does auto-fit do in grid?

A. Adjusts columns to fit available space
B. Hides empty columns
C. Makes grid items invisible
D. Fixes layout bugs

Q10: Can Grid and Flexbox be used together?

A. No
B. Yes
C. Only with JavaScript
D. Only in IE
← Previous Next →
Login
Go Back Top