CSS Grid is a powerful layout system in CSS that allows you to design complex web layouts with ease. In this guide, we will dive deep into advanced CSS Grid techniques, providing you with detailed syntax, theory, examples, and step-by-step explanations. By the end of this article, you will be proficient in using CSS Grid to create sophisticated and responsive web layouts.
Understanding the Basics of CSS Grid
Before we dive into advanced techniques, let’s quickly revisit the basics. CSS Grid is a two-dimensional layout system that allows you to work with both rows and columns. The key concepts of CSS Grid include:
- Grid Container: The element on which
display: gridis applied. It serves as the parent element. - Grid Items: The children of the grid container, which are placed inside the grid.
- Grid Lines: The dividing lines that create rows and columns.
CSS Grid Syntax Overview
To get started with CSS Grid, you define a grid container:
.container {
display: grid; /* Turns the element into a grid container */
grid-template-columns: repeat(3, 1fr); /* Defines three equal columns */
grid-template-rows: repeat(2, 200px); /* Defines two equal rows of 200px */
gap: 20px; /* Adds a 20px gap between grid items */
}
- display: grid;: This property turns the container into a grid.
- grid-template-columns: Defines the number and size of columns.
- grid-template-rows: Defines the number and size of rows.
- gap: Adds spacing between grid items.
Advanced CSS Grid Techniques
Now that we’ve covered the basics, let’s explore advanced CSS Grid features.
1. Grid Areas
Grid areas allow you to assign specific names to parts of the grid, making complex layouts easier to manage.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px 1fr 50px;
gap: 10px;
}
.header {
grid-area: header; /* Assigns the header area */
}
.sidebar {
grid-area: sidebar; /* Assigns the sidebar area */
}
.main {
grid-area: main; /* Assigns the main content area */
}
.footer {
grid-area: footer; /* Assigns the footer area */
}
Explanation:
- grid-template-areas: Defines named areas within the grid, making it easier to position elements.
- grid-area: Applies the named areas to specific grid items.
2. Implicit vs. Explicit Grids
CSS Grid can automatically create rows and columns, known as the implicit grid, or you can define them explicitly.
.container {
display: grid;
grid-template-columns: 200px 1fr;
grid-auto-rows: minmax(100px, auto); /* Automatically creates rows with a minimum height of 100px */
}
- grid-template-columns: Defines the explicit grid.
- grid-auto-rows: Creates rows automatically (implicit grid) with a minimum height.
3. Grid Line Numbering
You can precisely position items by referring to grid lines.
.item {
grid-column: 1 / 3; /* Spans from column line 1 to 3 */
grid-row: 2 / 4; /* Spans from row line 2 to 4 */
}
- grid-column: Specifies the start and end grid lines for columns.
- grid-row: Specifies the start and end grid lines for rows.
4. Fractional Units (fr)
The fr unit is a fractional unit that represents a portion of the available space.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns, with the middle column taking up twice the space */
}
- 1fr 2fr 1fr: The middle column is twice as wide as the other two.
5. Minmax Function
The minmax function allows you to set a range for column or row sizes
.container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Three columns with a minimum width of 100px and a maximum of 1fr */
}
- minmax(100px, 1fr): Ensures the column is at least 100px wide but can grow as needed.
6. Auto-Fill and Auto-Fit
These properties allow you to automatically fill or fit items into the grid.
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Automatically creates as many columns as can fit within the container */
}
- auto-fill: Fills the grid with as many items as possible.
- auto-fit: Fits the items to the available space, adjusting their size.
7. Aligning Items in the Grid
CSS Grid allows you to align items both horizontally and vertically.
.container {
display: grid;
align-items: center; /* Aligns items vertically */
justify-items: center; /* Aligns items horizontally */
}
- align-items: Aligns grid items along the vertical axis.
- justify-items: Aligns grid items along the horizontal axis.
Exercises
Exercise 1: Create a 4×4 Grid
- Create a grid with four rows and four columns. Each cell should be 100px by 100px.
.container {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
Answer: The grid will have four equal columns and rows, each 100px by 100px.
Exercise 2: Use Grid Areas
- Create a layout with header, sidebar, main content, and footer using grid areas.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px 1fr 50px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Answer: The layout is divided into four named areas, making it easier to manage and understand.
Exercise 3: Implement Fractional Units
- Create a grid with three columns: the first and third should take up 1fr each, and the middle should take up 2fr.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Answer: The middle column will be twice as wide as the other two.
Exercise 4: Align Grid Items
- Align all grid items to the center both horizontally and vertically.
.container {
display: grid;
align-items: center;
justify-items: center;
}
Answer: All items will be perfectly centered within their grid cells.
Exercise 5: Create a Responsive Grid
- Use
auto-fillto create a grid that automatically adjusts based on screen size.
- Use
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
Answer: The grid will adjust the number of columns based on the available space.
Exercise 6: Use Minmax with Auto-fit
- Create a grid where each column is at least 200px wide but can grow to fill the available space.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Answer: The columns will adjust their size to fill the available space, but they won’t shrink below 200px.
Exercise 7: Implicit Grid
- Create a grid where rows are automatically created as needed, each with a minimum height of 150px.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-auto-rows: minmax(150px, auto);
}
Answer: Rows will be created automatically, with each having a minimum height of 150px.
Exercise 8: Span Items Across Rows and Columns
- Make a grid item span two columns and three rows
.item {
grid-column: span 2;
grid-row: span 3;
}
Answer: The item will take up two columns and three rows.
Exercise 9: Create a Grid with Gaps
- Add 20px gaps between grid items.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
Answer: A 20px gap will be created between all grid items.
Exercise 10: Align Individual Grid Items
- Align a single grid item to the start of the row and center of the column
.item {
justify-self: start;
align-self: center;
}
Answer: The item will be aligned to the start of the row and centered vertically.
Exercise 11: Fixed vs. Fluid Grid
- Create a grid where some columns have fixed widths and others are fluid.
.container {
display: grid;
grid-template-columns: 100px 1fr 200px;
}
Answer: The first column is fixed at 100px, the second is fluid, and the third is fixed at 200px.
Exercise 12: Nested Grids
- Create a nested grid inside a grid item.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.nested-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
Answer: A grid is placed inside another grid item, creating a complex layout.
Exercise 13: Using Grid Order
- Change the order of grid items.
.item1 {
order: 2;
}
.item2 {
order: 1;
}
Answer: The grid items will appear in the reverse order as specified.
Exercise 14: Full-Height Sidebar
- Create a sidebar that spans the full height of the grid.
.sidebar {
grid-row: 1 / -1;
}
Answer: The sidebar will span from the first to the last row.
Exercise 15: Centering a Single Item
- Center a single grid item within the grid container.
.container {
display: grid;
place-items: center;
}
Answer: The item will be perfectly centered both horizontally and vertically.
Projects
Project 1: Blog Layout with Grid Areas
- Create a blog layout with a header, sidebar, main content, and footer using grid areas.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px 1fr 50px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Answer: The blog layout will be divided into a header, sidebar, main content area, and footer, making it easy to manage and style.
Project 2: Responsive Portfolio Grid
- Create a responsive portfolio grid using
auto-fillandminmax.
- Create a responsive portfolio grid using
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
Answer: The portfolio grid will automatically adjust to screen size, ensuring that each item is at least 250px wide.
Project 3: E-commerce Product Grid
- Build a grid for displaying e-commerce products, with different spans for featured items.
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.featured {
grid-column: span 2;
grid-row: span 2;
}
Answer: Featured products will take up more space, making them stand out in the grid.
Project 4: Dashboard Layout
- Design a dashboard layout with grid areas and fractional units.
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 80px 1fr 60px;
}
Answer: The dashboard will be divided into a header, sidebar, main content area, an aside section, and a footer.
Project 5: Magazine Layout
- Create a magazine-style layout with a complex grid structure
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
gap: 20px;
}
.feature {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.article {
grid-column: span 1;
grid-row: span 1;
}
Answer: The magazine layout will have a large feature area and smaller articles arranged around it.
Project 6: Full-Screen Landing Page
- Build a full-screen landing page using CSS Grid, with sections for a hero image, features, and a call-to-action.
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 60vh 1fr 1fr;
}
.hero {
grid-row: 1 / 2;
}
.features {
grid-row: 2 / 3;
}
.cta {
grid-row: 3 / 4;
}
Answer: The landing page will be divided into three sections, each taking up a portion of the viewport.
Project 7: Complex Form Layout
- Design a complex form using CSS Grid to arrange input fields, labels, and buttons
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
label {
grid-column: 1 / 2;
}
input, button {
grid-column: 2 / 3;
}
Answer: The form layout will be neatly organized, with labels and input fields aligned for readability.
Project 8: Interactive Gallery
- Create an interactive gallery where items change size and position on hover using grid and transitions.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item:hover {
grid-column: span 2;
grid-row: span 2;
transition: all 0.3s ease;
}
Answer: The gallery items will expand and shift when hovered over, creating an interactive user experience.
Additional Projects Covering Previous Days
Project 9: Complete Website Layout
- Design a complete multi-page website layout combining CSS Grid, Flexbox, and responsive design techniques learned in previous lessons.
/* Header */
.header {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
/* Main content */
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* Footer */
.footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Answer: This project will bring together grid, flexbox, and responsive design techniques to create a fully functional website layout.
Project 10: E-commerce Landing Page
- Develop an e-commerce landing page that uses CSS Grid for layout, Flexbox for alignment, and media queries for responsiveness.
/* Grid layout */
.landing-page {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
/* Flexbox for alignment */
.product-info {
display: flex;
justify-content: space-between;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.landing-page {
grid-template-columns: 1fr;
}
}
Answer: This project will reinforce the use of multiple CSS techniques to create a professional, responsive e-commerce landing page.
By following this detailed guide and completing the exercises and projects, you will master advanced CSS Grid techniques and be well-equipped to handle complex web layouts. Practice, experiment, and take your web design skills to the next level!
