• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top