CSS布局中grid网格布局理解和用法--一般新闻的布局

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）效果展示

在这里插入图片描述

这些只是我的基本的理解和使用，关于网格布局还有很多属性可以去看文档进行了解，继续学习一起加油啦！！！