grid布局
1、参考文档理解grid网格布局
CSS 网格是一个用于 web 的二维布局系统。利用网格,你可以把内容按照行与列的格式进行排版。网格是由一系列水平及垂直的线构成的一种布局模式。
文档链接:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids
2、根据例子分析
例子链接:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction
这里还是重现一下例子的代码
(1)例子代码
html代码:
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
css代码:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 10px;
}
.box1 {
background-color: red;
grid-column: 2 / 4;
grid-row: 1;
}
.box2 {
background-color: brown;
grid-column: 1;
grid-row: 1 / 3;
}
.box3 {
background-color: gold;
grid-row: 2;
grid-column: 3;
}
呈现效果:
(2)代码逐步分析
1.父容器代码分析
先给父容器设置display: grid;开启网格布局
给父容器设置行和列的个数和宽度形成网格:
grid-template-rows: 100px 100px;表示将父容器分为两行,每一行高度为100px。
grid-template-columns: 1fr 1fr 1fr;表示将父容器分为三列,每一列所占比例都是1,即占父容器的1/3。(fr单位按比例划分可用空间)
grid-gap: 10px;表示单元网格之间间距为10px。
2.父容器网格布局效果显示
3.子元素代码分析
补充:grid -column属性是grid-column-start和grid-column-end的合并写法,grid-row是grid-row-start和grid-row-end的合并写法
即:
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
4.子元素图示效果分析
3、网格布局实战
(1)要求
按照一般新闻格式要求,左边新闻封面图,右边分上下结构,上面标题下面详细描述
(2)分析
(3)代码实现
html代码:
<div class="news">
<img class="image" src="../assets/picture.png">
<h2 class="title">新闻标题</h2>
<p class="description">我是新闻详细描述呀呀呀呀呀呀呀呀呀。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。</p>
</div>
css代码:
.news {
display: grid;
/* 由分析图是三行,每行的高度按需自由发挥,这里写40px是因为图片高度定为120px了 */
grid-template-rows: 40px 40px 40px;
/* 由分析图是两列,其中第二列差不多是第一列的三倍,这里根据图片大小占比进行比例换算*/
grid-template-columns: 120px 360px;
}
.image {
width: 120px;
height: 120px;
grid-row: 1;
grid-column: 1/2;
}
.title {
margin: 0;
grid-row: 1/2;
grid-column: 2;
}
.description {
text-align: start;
word-wrap: break-word;
margin: 0;
grid-row: 2/3;
grid-column: 2;
}
(4)效果展示
这些只是我的基本的理解和使用,关于网格布局还有很多属性可以去看文档进行了解,继续学习一起加油啦!!!