Scribd
Upload
26 views

CSS Grid Layout

The document provides a comprehensive guide on CSS Grid Layout, detailing its features and syntax for creating complex web layouts. Key topics include defining grid containers, using fr units for columns and rows, managing grid gaps, and placing grid items effectively. It also compares CSS Grid with Flexbox, highlights responsive design techniques, and emphasizes the importance of using both tools together for modern web design.

Uploaded by

dev070panchal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

CSS Grid Layout

The document provides a comprehensive guide on CSS Grid Layout, detailing its features and syntax for creating complex web layouts. Key topics include defining grid containers, using fr units for columns and rows, managing grid gaps, and placing grid items effectively. It also compares CSS Grid with Flexbox, highlights responsive design techniques, and emphasizes the importance of using both tools together for modern web design.

Uploaded by

dev070panchal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

CSS Grid Layout Page 1 of 7

Table of Contents
CSS Grid Layout – Creating Complex Grids
1. Basics of CSS Grid

Defining a Grid Container

2. Defining Columns & Rows with fr Units

3. Grid Gaps (Spacing between Cells)

4. Placing Grid Items

5. Named Grid Lines for Better Readability

6. Nested Grids

7. The subgrid Feature (Upcoming)

8. Making a Full-Page Grid Layout

9. CSS Grid vs. Flexbox – When to Use What?

10. Responsive Grid with minmax()

Conclusion
Page 2 of 7

Here's a well-structured, easy-to-follow explanation of CSS Grid Layout, covering key concepts
with syntax, examples, and references.

CSS Grid Layout – Creating Complex Grids


CSS Grid is a powerful layout system that helps create complex web page structures with ease. It
allows for precise placement of elements without relying on floats or positioning tricks.

1. Basics of CSS Grid


Defining a Grid Container
Any element can be made a grid container using display: grid;
Inside the container, grid items automatically align themselves.

css

.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns of 200px each */
grid-template-rows: 100px 100px; /* 2 rows of 100px each */
}

🔹 Alternative: grid-template (Shorthand)


css

.container {
display: grid;
grid-template: 100px 100px / 200px 200px 200px; /* Rows first, then columns */
}

✅ Reference:
🔗 MDN - CSS Grid Layout
🔗 W3Schools - CSS Grid

2. Defining Columns & Rows with fr Units


Page 3 of 7
The fr unit distributes space proportionally.
Example: grid-template-columns: 2fr 1fr; → 2 parts vs. 1 part.

css

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

🔹 Using repeat() for Multiple Columns


css

.container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* Creates 4 equal columns */
}

3. Grid Gaps (Spacing between Cells)


gap: 10px; → Adds spacing between rows & columns.

row-gap: 10px; column-gap: 20px; → Different spacing.

css

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

✅ Reference:
🔗 CSS Tricks - A Complete Guide to Grid

4. Placing Grid Items


Items can be placed manually using grid-column & grid-row .
Page 4 of 7
css

.item {
grid-column: 2 / 4; /* Starts at column 2, ends at column 4 */
grid-row: 1 / 3; /* Starts at row 1, ends at row 3 */
}

🔹 Using span for Dynamic Positioning


css

.item {
grid-column: span 2; /* Spans across 2 columns */
grid-row: span 2; /* Spans across 2 rows */
}

✅ Reference:
🔗 MDN - Placing Items in Grid

5. Named Grid Lines for Better Readability


Instead of using numbers, name your grid lines:

css

.container {
display: grid;
grid-template-columns: [start] 1fr [middle] 2fr [end];
}

.item {
grid-column: start / middle; /* Uses named grid lines */
}

6. Nested Grids
A grid item can also be a grid container.
css

.parent {
display: grid;
Page 5 of 7
grid-template-columns: repeat(3, 1fr);
}

.child {
display: grid;
grid-template-columns: repeat(2, 1fr);
}

7. The subgrid Feature (Upcoming)


Allows child elements to inherit the parent's grid.
Currently not fully supported in all browsers.

css

.parent {
display: grid;
grid-template-columns: 1fr 2fr;
}

.child {
display: grid;
grid: subgrid;
}

✅ Reference:
🔗 MDN - Subgrid

8. Making a Full-Page Grid Layout


css

body {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}

header {
Page 6 of 7
grid-column: 1 / -1; /* Spans all columns */
}

main {
grid-column: 2;
}

aside {
grid-column: 1;
}

✅ Reference:
🔗 CSS Tricks - Grid Examples

9. CSS Grid vs. Flexbox – When to Use What?


Feature CSS Grid Flexbox

Layout Type Two-dimensional (rows & columns) One-dimensional (row OR column)

Best For Full page layout Aligning items inside a container

Example Use Website structure Navbar, buttons, cards

✅ Tip: Use Grid for page layouts and Flexbox for smaller components.

10. Responsive Grid with minmax()


Ensures columns never get too small.

css

.container {
display: grid;
Page 7 of 7
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

Conclusion
powerful and eliminates layout hacks.
CSS Grid is
Use fr units, repeat(), span, and grid gaps effectively.
Flexbox & Grid work well together for modern layouts.
✅ More Learning Resources:
🔗 MDN CSS Grid
🔗 W3Schools CSS Grid
🔗 CSS Tricks Grid Guide

Let me know if you need code examples or real-world projects to practice! 🚀


2/2

You might also like