Lecture 10: Advanced CSS Grid Techniques
Welcome to the tenth lecture of the "Basic to Brilliance" course. In this lecture, we’ll delve deeper into advanced CSS Grid techniques. These techniques will enable you to create even more complex and responsive layouts. By the end of this lecture, you’ll be able to work with grid areas, grid auto-placement, and combine CSS Grid with other layout systems like Flexbox.
1. Grid Areas
Grid areas allow you to assign names to sections of your grid, making it easier to manage and visualize your layout.
- Example: Naming grid areas for a layout with a header, sidebar, content, and footer.
HTML:
<div class="grid-container">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="content">Main Content</main>
<footer class="footer">Footer</footer>
</div>
CSS:
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
In this example:
-
Grid Areas: The
grid-template-areasproperty defines a layout with three sections: a header spanning two columns, a sidebar and main content in the middle, and a footer. - By assigning grid items (
header,sidebar, etc.) to specific areas, you control the layout more effectively.
2. Grid Auto-Placement
CSS Grid has an auto-placement feature that automatically positions grid items when they are not explicitly placed. You can control how this works using grid-auto-flow.
-
Values:
-
row: Items are placed row by row (default). -
column: Items are placed column by column. -
dense: Items will be packed into empty spaces in the grid.
-
Example:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* Auto-places items and packs them densely */
}
In this case, grid items will be placed row by row, and smaller items will fill any gaps.
3. Using the minmax() Function
The minmax() function allows you to define a range for grid tracks, such as specifying the minimum and maximum size a grid track can take.
- Example:
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(150px, 1fr));
}
In this example:
- The grid has three columns.
- Each column will be at least 150px wide but can grow to fill the available space (
1fr).
4. Grid Auto-Fill vs. Auto-Fit
Both auto-fill and auto-fit are used to create dynamic grids, but they work slightly differently:
- Auto-Fill: Adds as many columns as possible, even if they’re empty.
Auto-Fit: Shrinks or grows columns to fit the available space.
Example: Auto-fit and auto-fill comparison.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Auto-fill */
}
.grid-container-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Auto-fit */
}
Both options automatically adjust the number of columns based on the available space, but auto-fit will collapse empty columns.
5. Combining CSS Grid with Flexbox
While CSS Grid is great for structuring the overall layout, Flexbox is perfect for controlling alignment within individual items. You can combine both to handle different parts of your layout.
- Example: Using CSS Grid for the main layout and Flexbox for alignment inside grid items.
HTML:
<div class="grid-container">
<div class="header">Header</div>
<div class="content">
<div class="flexbox-item">Item 1</div>
<div class="flexbox-item">Item 2</div>
</div>
<div class="footer">Footer</div>
</div>
CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
}
.content {
display: flex;
justify-content: space-around;
align-items: center;
}
.flexbox-item {
padding: 20px;
background-color: #ddd;
}
In this example:
- Grid Layout: The overall layout is structured with CSS Grid, with a header, content, and footer.
-
Flexbox: The
contentsection uses Flexbox to align items inside it.
6. Implicit vs. Explicit Grids
Grids can be defined explicitly (using grid-template-columns and grid-template-rows) or implicitly (where new tracks are created automatically).
- Explicit Grid: You define the number of rows and columns.
Implicit Grid: The grid automatically creates rows or columns to accommodate extra items.
Example:
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-auto-rows: 50px; /* Implicitly adds rows */
}
In this case, the grid will automatically create new rows if more items are added than fit in the defined columns.
7. Creating a Full-Page Grid Layout
Let’s use CSS Grid to create a responsive full-page layout with a header, main content area, sidebar, and footer.
HTML:
<div class="grid-container">
<header class="header">Header</header>
<nav class="sidebar">Sidebar</nav>
<main class="main-content">Main Content</main>
<footer class="footer">Footer</footer>
</div>
CSS:
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh; /* Full height layout */
}
.header {
grid-area: header;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 20px;
}
.main-content {
grid-area: main;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
In this example:
- Grid Areas: The layout consists of a header, sidebar, main content, and footer.
- The grid adjusts the height of each section automatically, filling the full viewport height.
Practice Exercise
- Create a responsive blog layout with a header, sidebar, main content, and footer using CSS Grid.
- Use
grid-template-areasto define the structure. - Make the layout responsive by adjusting the number of columns on different screen sizes.
Next Up: In the next lecture, we’ll explore CSS Positioning and how to position elements using properties like absolute, relative, and fixed. Get ready to enhance your layout control even further!
Top comments (2)
Very helpful, but it can be more useful if you've included some demos cause it can greatly Fit in mind
I will try next time