4 合并grid列_Grid布局会了吗？

最新推荐文章于 2023-08-08 22:01:05 发布

VIP文章 weixin_39996096

最新推荐文章于 2023-08-08 22:01:05 发布

阅读量368

点赞数

文章标签： 4 合并grid列

本文链接：https://blog.csdn.net/weixin_39996096/article/details/111709272

版权

Grid布局

Grid布局即网格布局，将网页分成一个个的网格，然后通过这些网格进行组合，做出各种各样的布局。首先看看兼容性：

Grid布局 VS Flex布局

Grid布局与flex布局只是看起来差不多，其实有着本质的区别。Grid是二维布局，而flex是一维布局。flex布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

但是Grid有个很大的问题就是兼容性不太好，不兼容ie。

DEMO:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid布局title>
    <style>.container {
     display: grid;/* fr 占满剩余的部分 */grid-template-columns: repeat(3, 1fr);/* 行间距和列间距都为20px */grid-gap: 20px;/* grid-auto-rows属性为网格容器中的行设置大小 *//* 表示不小于100px,最大值为自适应 */grid-auto-rows: minmax(100px, auto);
        }.one {
     grid-column: 1 / 2;grid-row: 1;background: #19CAAD;
        }.two {
     grid-column: 2 / 4;grid-row: 1 / 3;background: #8CC7B5;
        }.three {
     grid-row: 2 / 5;grid-column: 1;background: #D1BA74;
        }.four {
     grid-column: 3;grid-row: 3;background: #BEE7E9;
        }.five {
     grid-column: 2;grid-row: 3/5;background: #E6CEAC;
        }.six {
     grid-column: 3;grid-row: 4;background: #ECAD9E;
        }.item {
     text-align: center;font-size: 200%;color: #fff;
        }.seven {
     background: #DD98B2;
        }.eight {
     background: #ABE3B7;
        }.nine {
     background: #BFB540;
        }style>
head>

<body>
    <div class="container">
        <div class="one item">Onediv>
        <div class="two item">Twodiv>
        <div class="three item">Threediv>
        <div class="four item">Fourdiv>
        <div class="five item">Fivediv>
        <div class="six item">Sixdiv>
        <div class="seven item">Sevendiv>
        <div class="eight item">Eightdiv>
        <div class="nine item">Ninediv>
    div>
body>
<script>

script>

html>

效果图：

容器和项目：我们通过在元素上声明 display：grid(块级元素) 或 display：inline-grid(行内块元素) 来创建一个网格容器。容器内的子元素就变成了一个个网格项目。

网络轨道:grid-template-columns和grid-template-row属性来定义网格中的行和列。

网格单元:容器内的子元素都是一个个网格单元。

repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

fr 关键字:为了方便表示比例关系，网格布局提供了fr<

最低0.47元/天解锁文章

weixin_39996096

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4 合并grid列_Grid布局会了吗？

Grid布局Grid布局即网格布局，将网页分成一个个的网格，然后通过这些网格进行组合，做出各种各样的布局。首先看看兼容性：Grid布局 VS Flex布局Grid布局与flex布局只是看起来差不多，其实有着本质的区别。Grid是二维布局，而flex是一维布局。flex布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的...
复制链接

扫一扫