CSS第九章移动端布局-Grid网格布局

最新推荐文章于 2024-07-11 16:02:06 发布

guanerkoushi

最新推荐文章于 2024-07-11 16:02:06 发布

阅读量603

点赞数

分类专栏： Web开发文章标签： css

本文链接：https://blog.csdn.net/Xiaolei233/article/details/117491914

版权

本文深入探讨了CSS Grid布局，包括作用在grid容器上的属性如grid-template-columns、grid-template-rows、grid-template-areas等，以及作用在grid子项上的属性如grid-column-start、grid-row-end等。通过案例分析，解释了如何实现骰子点数和百度搜索风云榜的布局。

摘要由CSDN通过智能技术生成

CSS_移动端布局

Grid网格布局

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

属性分类：
在这里插入图片描述

作用在grid容器上的CSS属性

1. grid-template-columns 和 grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)

对于规律的网格划分，若要添加多个横纵网格时，可利用repeat()语法。    repeat(重复的个数，每个网格的值)

取值为像素、百分比、自适应：

<style>
    .box{
      width:500px; height:500px; border:1px gray dotted; display:grid;
        grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px;
    }
</style>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</div>

在这里插入图片描述
取值为fr单位：

<style>
    .box{
      width:500px; height:500px; border:1px gray dotted; display:grid;
        grid-template-rows: 1fr 1fr 2fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
</style>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

在这里插入图片描述
只有在fr累加和大于1，才会将空余空间填满，否则会出现剩余空间

<style>
    .box{
      width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: .1fr .1fr .2fr;
        grid-template-columns: 1fr 1fr 1fr;
    }
</style>

在这里插入图片描述
repeat语法：
上面的可改写为：

<style>
    .box{
      width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(3,1fr);
    }
</style>

也可以给每个网格元素加背景颜色和边框.box div{ background:red;border:1px black solid;}
在这里插入图片描述

2. grid-template-areas 和 grid-template

grid-template-areas 是给网格划分区域的(起名：任意)。此时grid子项只要使用grid-area属性指定其属于那个区。起名的方法对于子项较多的情况更加适用。
	注意：不允许出现特殊图形，只能是矩形
		
grid-template 是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写，顺序有变。

grid-template-areas示例：

<style>
    .box2{
      width:300px; height:300px; border:1px gray dotted; display:grid;
        grid-template-rows: repeat(3,1fr);
        grid-template-columns: repeat(3,1fr);
        grid-template-areas: 
        "a1 a1 a1"</