Key Concepts of CSS Grid:
- Grid Container: The parent element that holds all the grid items.
- Grid Items: The child elements inside the grid container.
- Grid Tracks: The rows and columns of the grid.
- Grid Lines: The lines that separate rows and columns, referenced for positioning items.
- Grid Cells: The space between two grid lines, where grid items can be placed.
- Grid Areas: A named section of the grid that spans multiple rows and columns.
Basic Syntax
You define a grid container by setting the display property to grid (or inline-grid for inline grids). Then you can define rows and columns with grid-template-rows and grid-template-columns.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-rows: 100px auto 200px; /* 3 rows with different heights */
gap: 10px; /* space between grid items */
}Defining Rows and Columns
You can specify the number and size of the rows and columns:
- 1fr: Fractional unit. Divides available space into fractions.
- px, %, em, rem: Fixed or relative measurements.
- auto: The size is determined by the content.
Example:
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* First column 200px, second takes 1 fraction, third takes 2 fractions */
grid-template-rows: auto 100px; /* First row auto-sized, second row 100px */
}Grid Template Areas
You can visually divide the grid into areas with names and then assign items to those areas. This can make the layout more intuitive.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto auto;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
- In this example, the grid has named areas like header, main, sidebar, and footer, and the items are placed in these areas using grid-area.
Placing Items in the Grid
You can place items in specific grid cells by using grid line numbers or grid areas.
1. Using Grid Line Numbers
You can specify the starting and ending points for grid items using line numbers. The lines are numbered from 1 to N (for both rows and columns).
.item {
grid-column: 1 / 3; /* Starts at line 1, ends at line 3 (spanning 2 columns) */
grid-row: 2 / 4; /* Starts at row 2, ends at row 4 (spanning 2 rows) */
}2. Using Grid Areas
You can also use grid areas to position items.
.item {
grid-area: header; /* Places the item in the 'header' grid area */
}Responsive Grid Layouts
Grid layouts are great for building responsive designs. You can use media queries to change the grid structure for different screen sizes.
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns by default */
gap: 20px;
}@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* 1 column on smaller screens */
}
}
In this example, on larger screens, the grid will have two columns, and on smaller screens, it will change to a single column.
Example: Full Grid Layout
Let’s build a simple layout with a header, sidebar, main content area, and footer using grid.
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>.container {
display: grid;
grid-template-columns: 1fr 3fr; /* 2 columns: first 1fr, second 3fr */
grid-template-rows: auto 1fr auto; /* 3 rows: first and third are auto-sized */
gap: 10px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}.header {
grid-area: header;
background-color: lightblue;
}
.sidebar {
grid-area: sidebar;
background-color: lightgray;
}
.main {
grid-area: main;
background-color: lightgreen;
}
.footer {
grid-area: footer;
background-color: lightcoral;
}
This will create a layout like:
- Header at the top (spanning both columns),
- Sidebar on the left (in the first column),
- Main Content on the right (in the second column),
- Footer at the bottom (spanning both columns).
CSS Grid vs. Flexbox
- Grid is better for two-dimensional layouts (rows and columns).
- Flexbox is ideal for one-dimensional layouts (either rows or columns).
You can also combine both methods in one layout, depending on the complexity and needs of your design.
Grid Line Numbering (Implicit vs Explicit Grid)
- Explicit Grid: Defined with grid-template-columns and grid-template-rows (what we covered above).
- Implicit Grid: If you place an item outside the defined grid, CSS Grid will automatically create additional rows or columns to accommodate it.
Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}.item {
grid-column: 1 / 4; /* This will create a 3-column grid because the item spans beyond the defined grid */
}
Conclusion
CSS Grid Layout is an incredibly powerful tool for building complex layouts. By using grid containers, grid tracks, lines, and areas, you can create flexible, responsive designs with less effort. It’s perfect for building both simple and complex layouts, especially when you need precise control over row and column behavior.
Let me know if you’d like to see more specific examples or dive deeper into any part of the CSS Grid system!
