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!
