foreword
The layout of previous HTML pages was basically implemented through Flexbox, which can easily solve complex web layouts. Now there's a new contender for building the best layout system for HTML. It is a powerful CSS Grid layout.
What is the difference between grid and flex? What scenario is it suitable for?
- Flexbox is a one-dimensional layout system, suitable for partial layout, such as navigation bar components.
- Grid is a two-dimensional layout system, usually used for planning the entire page.
- The two do not conflict in terms of application scenarios. Although Flexbox can also be used for large page layouts, it is not as powerful and flexible as Grid. Combining the two is easier.
Features:
- fixed and flexible track sizes;
- Items can be placed at precise positions on the grid using line numbers, names or by positioning grid areas;
- Multiple items can be placed into a grid cell or area, and they can partially overlap each other.
shortcoming:
Compatibility is relatively poor.
Simply draw a picture:
flex layout:
grid layout:
grid column
The vertical line orientation of grid elements is called columns.
grid row
The horizontal line direction of grid elements is called row.
grid spacing
The grid spacing refers to the grid horizontal spacing or the grid vertical spacing between two grid units.
We can use the following properties to adjust the size of the gap to the element
- grid-column-gap
- grid-row-gap
- grid-gap
The flex layout we used before can only handle the layout of elements in one dimension at a time, one row or one column.
And now the grid layout (grid layout) can set the position of a container more freely
For example:
If you use flex layout to implement the typesetting method, you need to nest many divs to distinguish them piece by piece
Now, if you use the grid layout, you can save a lot of div layouts and directly distinguish the positions where the elements stand
Basic example:
Use the grid layout to realize the typesetting in the figure:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>grid</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container > div {
border-radius: 5px;
padding: 10px;
background-color: rgb(232, 66, 152);
}
.container{
display:grid;
gap:20px;
grid-template-columns:1fr 2fr 1fr ;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>We only need to add the display:grid; attribute to the parent element, and the child elements under it will change accordingly
fr: It is an exclusive attribute in the grid layout, which is used to evenly distribute the container space
Example:
As shown in the figure, it is relatively troublesome to implement this layout method using elastic layout, but it is much simpler when we use grid layout
code show as below:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Grid</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font: 0.9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
/* fr单位是frid布局专用的长度单位，可以平均的区分配每个容器所站的位置 */
/* 每列改怎么去分配位置，例如菜单和内容区，side（这里定义的是菜单，那么他就占用1fr的位置，content（内容）他占3fr的位置，所以在图中我们可以看到内容区要比菜单区域更宽一些） */
gap: 20px;
grid-template-areas:'header header'/* header就是头部 */
'side content'/* side菜单，content内容 */
'footer footer'/* footer底部 */
;
}
/* 给每个容器设置一个名称 */
header{
grid-area:header;
}
footer{
grid-area:footer;
}
aside{
grid-area:side;
}
article{
grid-area:content;
}
header,
footer {
border-radius: 5px;
padding: 10px;
background-color: rgb(173, 202, 232);
border: 1px solid #000;
}
aside,article {
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="container">
<header>这是头部导航</header>
<article>
<h1>这里内容区域</h1>
<p>
内容1
</p>
<p>
内容2
</p>
</article>
<aside>
<h2>这里是左侧菜单区域</h2>
<p>
菜单
</p>
</aside>
<footer>这里是底部</footer>
</div>
</body>
</html>Grid layout properties:
Refer to a tutorial: grid layout
Summarize:
The Grid layout is somewhat similar to the Flex layout, both of which can specify the positions of multiple items inside the container. However, they also have major differences.
Grid can do things that Flexbox can't do. Flexbox is more compatible than Grid, and they can work together. A grid item can become a flexbox container, and a flex item can become a grid container.
You can choose the corresponding layout according to the needs of the business scenario.