• 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 Column/Rows

← Previous Next →

🔹 What Are Grid Columns and Rows?

In CSS Grid, columns are the vertical divisions and rows are the horizontal divisions of the grid layout. You define these using:

  • grid-template-columns → defines the number and size of columns

  • grid-template-rows → defines the number and size of rows

They form the structure of the grid and determine how items are placed and sized inside the container.

🔸 Basic Grid Layout with Columns and Rows

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: 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

This creates a 2-column × 2-row grid with spacing between cells.

🔸 Column & Row Sizing Units

Unit Description
px Fixed size
% Relative to the container
fr Fraction of available space
auto Size based on content
minmax() Minimum and maximum range for a track

Example: Flexible Columns Using fr

grid-template-columns: 1fr 2fr;

Creates two columns — second is twice the width of the first.

Example: Responsive Grid

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

Automatically adjusts the number of columns based on available space.

🔸 Specifying Rows

grid-template-rows: 150px auto 100px;

Defines 3 rows with different heights.

🔸 Shorthand Property: grid-template

.grid-container {
  display: grid;
  grid-template: 100px 100px / 1fr 2fr;
}

Rows come before the slash (/), then columns.

Practice Questions

✅ Write CSS for the following:

Q1. Create a 3-column layout with equal width.

Q2. Create 2 rows with fixed height (100px each).

Q3. Make first column 1/3 and second 2/3 of the space.

Q4. Use repeat() to define 4 equal columns.

Q5. Create 2 columns with min width of 200px, responsive.

Q6. Set 3 rows with heights: 100px, auto, 50px.

Q7. Create a square grid of 3 rows × 3 columns.

Q8. Use grid-template shorthand for a 2x2 layout.

Q9. Add 20px gap between all rows and columns.

Q10. Combine fr and auto in row and column sizing.

Grid Column/Rows Quiz

Q1: Which property defines the number of columns in a grid?

A. grid-template-columns
B. columns-template
C. grid-columns
D. column-template

Q2: What does grid-template-rows: 100px auto; do?

A. First row fixed, second adjusts to content
B. Both rows fixed
C. All rows adjust to content
D. It breaks layout

Q3: What does 1fr mean in grid layout?

A. 1 pixel
B. 1 fraction of remaining space
C. Full width
D. Auto height

Q4: How do you create four equal-width columns?

A. grid-template-columns: repeat(4, 1fr);
B. columns: 4;
C. grid-columns: 25%;
D. grid-auto-columns: 100%;

Q5: Which value adjusts row size based on content?

A. auto
B. fit
C. minmax()
D. fill

Q6: What does this create: grid-template-columns: 2fr 1fr;?

A. Two columns, first is twice as wide
B. Two equal columns
C. One fixed, one flexible
D. Columns will not be visible

Q7: What does gap: 10px; apply to?

A. Only rows
B. Only columns
C. Both rows and columns
D. Only items with margins

Q8: Which shorthand defines both rows and columns?

A. grid-template
B. grid-area
C. grid-flow
D. layout-template

Q9: What happens if you define 3 items in a 2-column grid?

A. The third item wraps to the next row
B. It overlaps
C. It’s hidden
D. Grid breaks

Q10: Which unit is best for responsive grid columns?

A. px
B. fr
C. em
D. vh
← Previous Next →
Login
Go Back Top