Summary of usage of Grid layout in CSS (with code)
This article introduces to you a summary of the usage of Grid layout in CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you
1. Basic usage
There are 5 core attributes of Grid layout:
.parent {
display: grid;
grid-template-colomns: 30px 1fr;
grid-template-rows: repeat(3, 30px) 1fr;
& > .child {
grid-column: 1 / 3;
grid-row: 1;
}
}In general, Grid layout is: The parent element must be defined first It has several rows and columns. Then, the sub-element defines which row and column it is in (it can span multiple rows or columns).
Among them, everyone should be familiar with the display attribute, right? No more details here.
repeat function means to repeat a css value n times.
gird-column can be split into grid-column- start and grid-column-end two attributes.
gird-row can be split into grid-row-start and grid-row-end two properties.
2. <span style="font-size: 16px;">grid-template-areas</span> And<span style="font-size: 16px;">grid-area</span>
grid-template-areasThis attribute actually has a bit of a hieroglyphic meaning.
.parent {
display: grid;
grid-template-colomns: 100px 1fr;
grid-template-rows: 1fr 50px;
grid-template-areas:
"nav content"
"footer footer ";
& > .item1 {
grid-area: nav;
}
& > .item2 {
grid-area: content;
}
& > .item3 {
grid-area: footer;
}
}Above we divided the parent element into 4 grids. Then we named the upper left grid nav, the upper right grid content, and the bottom grid footer.
Finally, we only need to Just specify which area you belong to.
There is an advantage to writing this way: we no longer have to write the boring and difficult grid-column and grid-row , you can give your area a semantic name
3. <span style="font-size: 16px;">row-gap</span>, <span style="font-size: 16px;">colomns-gap</span>, <span style="font-size: 16px;">grid-gap</span>
Similar to Flex, Grid layout also supports line spacing and column spacing.
grid-gap is the merger of row-gap and colomns-gap.
grid-gap can also be abbreviated as gap.
Note: The default value of colomns-gap is normal , means the column spacing is 1em
##4. grid-auto-columns<span style="font-size: 16px;"></span>and grid-auto-rows<span style="font-size: 16px;"></span>
If you don’t know how many rows (columns) your grid has in advance, these two properties can help To you. Just like the literal meaning, This property represents the height (width) of the self-growing grid rows (columns)
Especially when you render a list of variable length , this attribute will be very useful.For example:.parent {
display: grid;
grid-template-colomns: 1fr;
grid-auto-rows: 100px;
& > .child {
grid-column: 1;
}
}Introduction to flexible box layout (with code)
How to implement responsive layout using CSS
The above is the detailed content of Summary of usage of Grid layout in CSS (with code). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
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
What is layout layout?
Feb 24, 2024 pm 03:03 PM
Layout refers to a typesetting method adopted in web design to arrange and display web page elements according to certain rules and structures. Through reasonable layout, the webpage can be made more beautiful and neat, and achieve a good user experience. In front-end development, there are many layout methods to choose from, such as traditional table layout, floating layout, positioning layout, etc. However, with the promotion of HTML5 and CSS3, modern responsive layout technologies, such as Flexbox layout and Grid layout, have become
In-depth understanding of Go language GUI programming: from entry to mastery
Mar 24, 2024 pm 09:06 PM
In today's software development field, GUI (Graphical User Interface, graphical user interface) programming is a crucial part. It allows users to interact with programs intuitively, improving user experience and making programs easier to use. Among many programming languages, Go language, as a language that has attracted much attention in recent years, also has the ability of GUI programming. This article will give you an in-depth understanding of Go language GUI programming from entry to proficiency, and help you better master it through specific code examples.
HTML Tutorial: How to Use Grid Layout for Grid Adaptive Layout
Oct 20, 2023 pm 12:36 PM
HTML tutorial: How to use Grid layout for grid adaptive layout, specific code examples are required Introduction: In modern web design, the adaptability of page layout is an important consideration. Although traditional layout methods such as floating and positioning can achieve a certain degree of adaptability, they often require a lot of code and adjustments. CSSGrid layout provides a simple and powerful way to implement grid adaptive layout. This tutorial will introduce in detail how to use CSSGrid layout to implement grid adaptive layout.
How to align text boxes in html
Mar 27, 2024 pm 04:33 PM
Methods for aligning text boxes in html: 1. Text alignment; 2. Use Flexbox layout alignment; 3. Use Grid layout alignment; 4. Use margin or position for fine-tuning.
HTML tutorial: How to use Grid layout for multi-column layout
Oct 25, 2023 am 10:27 AM
HTML tutorial: How to use Grid layout for multi-column layout Grid layout is one of the commonly used layout methods in modern web design. It can divide web content into multiple columns and rows to achieve flexible multi-column layout. This article will introduce how to use Grid layout to create a multi-column web page layout and provide specific code examples. 1. Introduction to Grid Layout Grid layout is a two-dimensional layout system that can divide web content into multiple grid areas. These grid areas can be defined and arranged according to design needs, making
How to center images in containers for Bootstrap
Apr 07, 2025 am 09:12 AM
Overview: There are many ways to center images using Bootstrap. Basic method: Use the mx-auto class to center horizontally. Use the img-fluid class to adapt to the parent container. Use the d-block class to set the image to a block-level element (vertical centering). Advanced method: Flexbox layout: Use the justify-content-center and align-items-center properties. Grid layout: Use the place-items: center property. Best practice: Avoid unnecessary nesting and styles. Choose the best method for the project. Pay attention to the maintainability of the code and avoid sacrificing code quality to pursue the excitement
Learn more about the responsive layout framework: a thorough guide for beginners to experts
Feb 19, 2024 pm 05:43 PM
Responsive Layout Framework Analysis: An Essential Guide from Beginners to Experts With the popularity and diversification of mobile devices, responsive layout has become an essential skill for modern web design. The responsive layout framework has become the preferred tool for developers due to its simplicity, flexibility and maintainability. However, for beginners, learning and understanding responsive layout frameworks can feel a little confusing. From beginner to expert, this article provides you with a detailed guide to mastering the responsive layout framework, along with concrete code examples. What is responsive cloth
HTML Tutorial: How to Use Grid Layout for Grid Adaptive Grid Layout
Oct 27, 2023 pm 06:28 PM
HTML tutorial: How to use Grid layout for grid-adaptive grid layout, specific code examples are required Introduction: With the development of the Internet, web page layout has become more and more important. Traditional web page layout methods, such as using tables or floating layouts, often require a lot of code and adjustments to achieve adaptive effects. The Grid layout introduced in CSS3 provides a more concise and flexible way to build a grid-adaptive grid layout. This article will introduce you to the basic concepts and practical applications of Grid layout, and provide you with
