Introduction
CSS grid layout is a powerful tool for creating organized webpage structures using rows and columns, eliminating the need for complex float and positioning techniques.
Basic Syntax
To create a grid layout, you simply set the display property of an HTML element to grid or inline-grid.
Key Properties of CSS Grid
column-gap: Specifies the space between columns.gap: Sets the spacing between rows and columns.grid: Establishes a grid-based layout system.grid-area: Defines the size and position of a grid item.grid-auto-columns: Specifies the size for implicitly generated grid columns.grid-auto-flow: Determines how auto-placed items flow into the grid.grid-auto-rows: Sets the size for implicitly generated grid rows.grid-column: Controls the placement of grid items along the column axis.grid-column-end: Specifies the end position of an item within a column.grid-column-gap: Sets the gap between columns.grid-column-start: Defines where an item starts within a column.grid-gap: Sets the gap between rows and columns.grid-row: Specifies the size and location of a grid item along the row axis.grid-row-end: Determines the end position of an item within a row.grid-row-gap: Sets the gap between grid elements along the row axis.grid-row-start: Defines where an item starts within a row.grid-template: A shorthand for defining grid columns, rows, and areas.grid-template-areas: Specifies named grid areas.grid-template-columns: Sets the number and size of grid columns.grid-template-rows: Sets the number and height of grid rows.
Grid Columns
The vertical lines of grid items are called columns.
Grid Rows
The horizontal lines of grid items are called rows.
Grid Gaps
The spaces between each column/row are called gaps.
You can adjust the gap size by using one of the following properties:
column-gaprow-gapgap
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>The CSS Grid Layout Module offers a grid-based layout system,
with rows and columns, making it easier to design web pages
without having to use floats and positioning:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
Output :
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
row-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The row-gap Property</h1>
<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
Output :
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px 100px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The gap Property</h1>
<p>Use the
<em>gap</em>
shorthand property to adjust the space between the columns and rows.
</p>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>Output :
Grid Lines
The lines between columns are called column lines.
The lines between rows are called row lines.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>Output :
Conclusion
In conclusion, CSS Grid Layout is a powerful module that allows developers to create complex web layouts with ease. By using rows and columns, designers can organize content effectively without relying on floats or positioning hacks. With properties like grid-template-columns, grid-template-rows, and grid-gap, precise control over the layout’s structure and spacing is achievable. Whether you’re building a simple grid or a sophisticated multi-column layout, CSS Grid Layout offers flexibility and responsiveness, making it an essential tool for modern web development.
Frequently Asked Question of CSS Grid
This is supported by all major modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. For older browsers, fallback techniques like using a polyfill or providing alternative layouts may be necessary.
Yes, this layout can be combined with other layout methods like Flexbox to create complex and versatile layouts. Depending on the requirements of your design, you can leverage the strengths of each layout method to achieve the desired result.
While frameworks like Bootstrap offer predefined grid systems and components, CSS Grid Layout provides more flexibility and control over the layout. With CSS Grid Layout, you have the freedom to design custom grid structures tailored to your specific needs, without being constrained by predefined classes and styles.
