This CSS Grid example shows how to use grid layout to create a web page structure containing the header, sidebar, main content area and bottom. 1. Enable grid layout through display: grid; 2. Use grid-template-areas to name the area and define a layout structure with three rows and two columns; 3. grid-template-columns set the left fixed 200px and the right adaptive; 4. grid-template-rows define the head 60px, main content adaptive, and bottom 50px; 5. Set the gap attribute to set the 10px spacing; 6. min-height: 100vh to ensure the container is full of viewport; 7. Responsive design changes to a single-column layout when the screen width is less than 600px through media query, and displays the head, main content, sidebar and bottom in turn to achieve mobile adaptation, fully covering core functions such as grid containers, area naming, fr units, spacing control and responsive layout.
A typical CSS Grid layout example can help you quickly understand how to use a grid system to build modern web layouts. Here is a practical, clear CSS Grid example that implements a common "home layout": including the header, sidebar, main content area, and bottom.
Basic HTML structure
<div class="container"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="main">Main Content</main> <footer class="footer">Footer</footer> </div>
CSS Grid Styles
.container {
display: grid;
/* Define the rows and columns of the grid*/
grid-template-columns: 200px 1fr; /* 200px on the left, adaptive on the right*/
grid-template-rows: 60px 1fr 50px; /* head 60px, main content adaptive, bottom 50px */
/* Define grid area naming layout*/
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
/* Grid spacing*/
gap: 10px;
/* The minimum height of the page is full of viewport*/
min-height: 100vh;
font-size: 18px;
font-family: Arial, sans-serif;
}
.header {
grid-area: header;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
grid-area: sidebar;
background-color: #f4f4f4;
padding: 20px;
}
.main {
grid-area: main;
background-color: #e0e0e0;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}Key points description
1. grid-template-areas naming layout
- Use
grid-areawithgrid-template-areasto visually define the layout structure, which is very intuitive. - Each line of string represents a line of the grid, and each word represents a region.
2. grid-template-columns and grid-template-rows
-
200px 1fr: The first column has a fixed width, and the second column occupies the remaining space. -
1frmeans "a free space", suitable for responsive design.
gap attributes
- Set the spacing between grid items, replacing complex margin calculations.
4. min-height: 100vh
- Let the container reach at least the entire viewport height to avoid the layout collapse when there is little content.
Extension: Responsive adjustment (mobile adaptation)
You can use media query to change to a single column layout on the small screen:
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}In this way, the content will be arranged in order on the mobile phone, making it easier to read.
This example covers the core usage of CSS Grid:
- Grid container settings
- Regional naming
- Elastic unit
fr - Spacing control
- Responsive compatibility
Basically all that is, not complicated but practical enough.
The above is the detailed content of css grid layout example. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
CSS Grid vs Flexbox: code comparison
Jun 01, 2025 am 12:03 AM
CSSGrid and Flexbox can be used in combination, but Grid is more suitable for two-dimensional layouts, while Flexbox is good at one-dimensional layouts. 1.Grid defines grid structure through grid-template-rows and grid-template-columns, which is suitable for complex two-dimensional layouts. 2. Flexbox controls direction and space allocation through flex-direction and flex attributes, suitable for one-dimensional layout and simple responsive design. 3. In terms of performance, Flexbox is suitable for simple layouts, and Grid is suitable for complex layouts, but may affect browser rendering performance. 4. Compatibility, Flexbox supports more extensively, Grid in modern browsers
How can CSS Grid's minmax() function be used to create flexible grid tracks?
Jun 07, 2025 am 12:12 AM
CSS's minmax() function is used to define the minimum and maximum size range of grid tracks, thereby improving layout flexibility. Its core function is to let the developer specify a size interval, such as minmax (200px, 1fr) means that the column width is at least 200px and can be stretched to 1fr at most. Common uses include responsive card layout, automatic column width adjustment of data tables, and balanced blank areas. Commonly used combinations include minmax (200px, 1fr), minmax (min-content,max-content), minmax (150px, 300px) and minmax (auto, 1fr). Notes include avoiding setting too high minimum values ??and testing different screens
What are the advantages of using CSS Grid for complex two-dimensional page layouts?
Jun 12, 2025 am 10:28 AM
CSSGridisapowerfultoolforcreatingcomplextwo-dimensionallayoutsbyofferingcontroloverbothrowsandcolumns.1.Itallowsexplicitdefinitionofrowsandcolumnswithflexiblesizingusingfeatureslikegrid-template-columns:repeat(auto-fit,minmax(200px,1fr))forresponsive
Can you nest a Flexbox container inside a CSS Grid item?
Jun 22, 2025 am 12:40 AM
Yes, you can use Flexbox in CSSGrid items. The specific approach is to first divide the page structure with Grid and set the subcontainer into a Grid cell as a Flex container to achieve more fine alignment and arrangement; for example, nest a div with display:flex style in HTML; the benefits of doing this include hierarchical layout, easier responsive design, and more friendly component development; it is necessary to note that the display attribute only affects direct child elements, avoids excessive nesting, and considers the compatibility issues of old browsers.
What are fr units in CSS Grid?
Jun 22, 2025 am 12:46 AM
ThefrunitinCSSGriddistributesavailablespaceproportionally.1.Itworksbydividingspacebasedonthesumoffrvalues,e.g.,1fr2frgivesone-thirdandtwo-thirds.2.Itenablesflexiblelayouts,avoidsmanualcalculations,andsupportsresponsivedesign.3.Commonusesincludeequal-
What is CSS Grid Layout?
Jun 23, 2025 am 12:13 AM
CSSGrid is a two-dimensional web layout tool that allows developers to accurately control the position and size of page elements by defining rows and columns. Unlike Flexbox, it can handle rows and columns simultaneously, suitable for building complex structures. To use Grid, you must first set the container to display:grid, and define the row and column size through 1.grid-template-columns and 2.grid-template-rows, set the spacing, and 4.grid-template-areas named area to improve readability. Its typical application scenarios include responsive layouts, dashboard interfaces, and picture galleries. Practical tips include: 5. Use grid-column/g
How to place items on a CSS grid using line numbers?
Jun 25, 2025 am 12:36 AM
ToplaceitemsonaCSSGridusinglinenumbers,youspecifythestartandendlinesforrowsandcolumns.1)Gridlinesareautomaticallynumberedstartingfrom1atthetop-leftcorner,withverticallinesseparatingcolumnsandhorizontallinesseparatingrows.2)Usegrid-columnandgrid-rowto
How to use CSS Grid and Flexbox together tutorial
Jun 27, 2025 am 12:40 AM
CSSGrid and Flexbox each have their own expertise, and the best results are used together. Grid is a two-dimensional layout that is suitable for the overall page structure, such as the arrangement of the header, sidebar, main content area, and footer; Flexbox is a one-dimensional layout that is more suitable for internal arrangement of components, such as navigation bar, button group, card list, etc. For example, use Grid in the middle of the three-column layout and then block up and down, and use Flexbox to automatically align several buttons in a row. The actual combination method is: the outer container uses display:grid to define the overall framework, and the child elements are arranged using display:flex in each area. Common structures include the entire page using Grid to divide blocks, and the navigation bar, button group and card list are aligned with Flexbox. Note
