grid布局

最新推荐文章于 2024-04-07 10:46:03 发布
最新推荐文章于 2024-04-07 10:46:03 发布
阅读量307 收藏
点赞数
分类专栏： 网页设计基础 文章标签： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45010894/article/details/125713330
版权

文章目录

网格及fr单位

在这里插入图片描述
code

 <style>
        .main{
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 2fr 1fr;
        }
        .main div{
            background: pink;
        }
    </style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>

</div>

result
在这里插入图片描述

合并网格及网格命名

在这里插入图片描述
code

  <style>
        .main{
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas:
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3"
        ;
        }
        .main div{
            background: pink;
            border: 1px purple solid;
            box-sizing: border-box;
        }
        .main div:nth-of-type(1){
            grid-area: a1;
        }
        .main div:nth-of-type(2){
            grid-area: a2;
        }
        .main div:nth-of-type(3){
            grid-area: a3;
        }
    </style>



<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

result
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

网格间隙

在这里插入图片描述

       /*row-gap: 20px;*/
            /*column-gap: 30px;*/
            grid-gap: 20px 30px;

 <style>
        .main{
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas:
            "a1 a1 a2"
            "a1 a1 a2"
            "a3 a3 a3";
            /*row-gap: 20px;*/
            /*column-gap: 30px;*/
            grid-gap: 20px 30px;
        }
        .main div{
            background: pink;
            border: 1px purple solid;
            box-sizing: border-box;
        }
        .main div:nth-of-type(1){
            grid-area: a1;
        }
        .main div:nth-of-type(2){
            grid-area: a2;
        }
        .main div:nth-of-type(3){
            grid-area: a3;
        }
    </style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

在这里插入图片描述

网格对齐方式

子项对齐

在这里插入图片描述

   <style>
        .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            justify-items: center;
            align-items: center;

        }
        .main div{
            width: 50px;
            height: 50px;
            background: pink;
        }
    </style>

<div class="main">
    <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>

result
在这里插入图片描述

 justify-items: start;
 align-items: end;

在这里插入图片描述
复合样式
在这里插入图片描述

所有网格对齐

在这里插入图片描述

  <style>
        .main {
            width: 500px;
            height: 500px;
            background: skyblue;
            display: grid;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;
            justify-content: space-evenly;
            align-content: end;


        }
        .main div{

            background: pink;
        }
    </style>
    <div class="main">
    <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>

在这里插入图片描述
缩写
在这里插入图片描述

在这里插入图片描述

隐式显式网格

在这里插入图片描述

默认行隐式网格

   <style>
        .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px;

        }
        .main div{

            border: 1px black solid;
            box-sizing: border-box;
            background: pink;
        }
    </style>
    <div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

</div>

设置了一行三列，4和5自动分布在了隐式网格

在这里插入图片描述
调节隐式网格

       .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px;
            /*默认row就是行产生隐式网格*/
            grid-auto-flow: row;
            /*可以调节产生隐式网格的高度*/
            grid-auto-rows: 100px;

        }

在这里插入图片描述

 <style>
        .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 100px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-auto-flow: column;
            grid-auto-columns: 100px;

        }
        .main div{
            border: 1px black solid;
            box-sizing: border-box;
            background: pink;
        }
    </style>

在这里插入图片描述

规定从哪里开始排

<style>
        .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px;
            /*默认row就是行产生隐式网格*/
            grid-auto-flow: row;
            /*可以调节产生隐式网格的高度*/
            grid-auto-rows: 100px;

        }
        .main div{
            border: 1px black solid;
            box-sizing: border-box;
            background: pink;
        }
        .main div:nth-of-type(1){
            grid-column-start: 2;
        }
    </style>

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

</div>

在这里插入图片描述

紧密排列dense

紧密排列dense
grid-auto-flow: row dense;

在这里插入图片描述

基于线的元素位置

在这里插入图片描述

<style>
        .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        .main div{
            background: pink;
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
        }

    </style>
    <div class="main">
    <div>1</div>


</div>

在这里插入图片描述
其他写法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

repeat minmax

根据分辨率不同调节行列
在这里插入图片描述
在这里插入图片描述

叠加布局

在这里插入图片描述

 <style>
        .main {
            width: 750px;
            height: 500px;
            background: skyblue;
            display: grid;
        }

       .main img{
           grid-area: 1/1/1/1;
       }
        .main span{
            grid-area: 1/1/1/1;
            justify-self: end;
            margin: 5px;

        }
        .main p{
            grid-area: 1/1/1/1;
            align-self: end;
            margin: 0;
            padding: 0;
            background:rgba(0,0,0,0.5);
            height: 30px;
            line-height: 30px;
            color: white;
        }
    </style>

<div class="main">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic5.40017.cn%2F01%2F000%2F4a%2F1d%2FrBLkBltAHdGAN4BLAADjeBFk6iU686_750x_00.jpg&refer=http%3A%2F%2Fpic5.40017.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660151456&t=859a309ea075a34710ffd37a890d6850"
         alt="">
    <span>自制</span>
    <p>热卖中...</p>


</div>

在这里插入图片描述

多种组合排列

在这里插入图片描述

<style>
        .main {
            width: 300px;
            height: 300px;
            background: skyblue;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            grid-gap: 5px;
        }
        .main div{
            background: pink;
        }
        .main div:nth-of-type(1){
            grid-area: 1/1/span 2/span 2;
        }
  </style>
<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>


</div>

在这里插入图片描述

栅格布局

在这里插入图片描述

<style>
        .row {

            background: skyblue;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 50px;
            grid-auto-rows: 50px;
        }

        .row div {
            background: pink;
            border: 1px black solid;
        }

              .row .col-1 {
            grid-area: auto/ auto/ auto/span 1;
        }

        .row .col-2 {
            grid-area: auto/ auto/ auto/span 2;
        }

        .row .col-3 {
            grid-area: auto/ auto/ auto /span 3;
        }
        .row .col-4 {
            grid-area: auto/ auto/ auto /span 4;
        }
        .row .col-5{
            grid-area: auto/ auto/ auto /span 5;
        }
        .row .col-6{
            grid-area: auto/ auto/ auto /span 6;
        }
        .row .col-7 {
             grid-area: auto/ auto/ auto /span 7;
         }
        .row .col-8{
              grid-area: auto/ auto/ auto /span 8;
          }
        .row .col-9{
            grid-area: auto/ auto/ auto /span 9;
        }
        .row .col-10{
            grid-area: auto/ auto/ auto /span 10;
        }
        .row .col-11{
            grid-area: auto/ auto/ auto /span 11;
        }
        .row .col-12{
            grid-area: auto/ auto/ auto /span 12;
        }

    </style>
 <div class="row">
    <div class="col-3">1</div>
</div>

在这里插入图片描述

行列自适应布局

在这里插入图片描述

    <style>
    .main{
        width: 300px;
        background: skyblue;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-auto-rows: 100px;
        grid-gap: 5px;
    }

    .main div{
        background: pink;
    }
    </style>

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
</div>

在这里插入图片描述

    <style>
    .main{
        height: 300px;
        background: skyblue;
        display: inline-grid;
        grid-template-rows: repeat(3,1fr);
        grid-auto-flow: column;
        grid-auto-columns: 100px;
        grid-gap: 5px;
    }

    .main div{
        background: pink;
    }
    </style>

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
    <div>6</div>
</div>

在这里插入图片描述

菜蜗牛很菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
grid 布局
wu_2004的博客
09-04 725
grid-row-start 设置开始的位置，grid-row-end设置结束的位置。repeat 可以更方便的设置列， 第一个参数为列数，第二个参数为 所占空间的比值。grid-row-gap 设置行间距 grid-column-gap 设置列间距。第一个是横向开始的网格线，第二个是纵向开始，第三个是横向结束，第四个是纵向结束。grid-gap 有两个参数，第一个参数代表 行间距，第二个参数代表列间距。grid-column 第一个是开始的值，第二个是结束的值。span 设置的值，就是占用多个单元格。
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 5万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
HTML-CSS(五十六)grid布局
weixin_44730244的博客
05-08 908
grid布局是一个二维布局方法，纵横两个方向总是同时出 grid-template-columns和grid-template-rows 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应(auto)以及fr单位（网格剩余空间比例单位）。 auto与1fr区别在于，auto时根据内容撑起的变宽，fr是对剩余空间的划分 有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作 如果列布局（行布局的分布）选用fr作为单位，并且总fr的值<1
快速上手CSS布局（1）——Grid布局
最新发布
weixin_50999722的博客
04-07 1398
Grid 布局是一种新型CSS布局方式，特点为二维布局，他比较擅长将一个页面划分为几个主要区域，本文主要介绍Grid布局的基本使用情况。
使用grid来进行常见布局
hsany330的专栏
05-31 583
grid布局是W3C提出的一个二维布局系统，通过display: grid来设置使用，对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对grid布局进行一个简单的了解。目前，grid仅仅只有Edge使用前缀能够支持，为了更好地体验，可以使用 Chrome 浏览器，在chrome://flags开启#enable-experimental-web-platform-features选项。 另外，更多的例子可以前往Grid by examples, 更多的用法可以前往...
Grid布局综合Demo案例
05-27
网格布局（Grid布局）是CSS3中的一个强大工具，它为网页设计提供了二维的、基于网格的布局系统，使得在创建复杂且响应式的页面布局时更加灵活和有序。本综合Demo案例将深入探讨如何利用Grid布局来实现各种复杂的网页...
grid.rar_grid布局
09-20
【标题】：“grid.rar_grid布局”指的是一个关于CSS Grid布局的示例，通过创建一个九宫格来展示其基本概念。这个压缩包包含了用于演示的HTML文件（grid.html）以及可能用于辅助理解的图片（1.jpg）。 【描述】：在...
使用CSS Grid布局实现网格的流动
09-25
CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...
grid布局demo.html
02-02
grid布局demo.html
10分钟理解CSS3 Grid布局
09-22
CSS3 Grid布局是一种用于网页布局的二维布局系统，它由CSS工作组在2011年提出并不断完善。网格布局能够将网页划分成多个网格区域，通过指定项目（子元素）所在的网格区域位置，实现复杂且灵活的布局。 在Grid布局...
布局“grid”详解介绍大全
weixin_42373116的博客
05-26 4330
前言 说起布局grid我相信重要程度比起flex不遑多让啊。除了兼容性方面，其余的方面都是很完美的。但是我相信随着技术的不断更替，兼容性已经不再是问题。那今天进让我们来看看grid到底能够干啥吧 本文意图不是想将API介绍清楚，如果想了解详细API，请移步阮一峰老师Grid布局。 本文从实际的布局业务出发。告诉各位读者什么样的情况下，适合哪种API 开始 1. 如果实现多行多列网格布局呢？？？ .container { display: grid; gr
Grid布局详解-看这篇就够了
qq_46372132的博客
08-29 3159
Grid布局详解-看这篇就够了,比flex布局更强大的grid网格布局
【布局】 Grid网格布局
m0_57135756的博客
04-07 1659
Grid布局 CSS Grid 网格布局介绍 CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。CSS Grid 布局不仅仅可以使复杂的布局和精美的排版成为可能，而且还可以使其变的干净利落可维护。 基础知识和浏览器支持 ​ 截至2022年3月，大部分浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和
grid栅格布局详解
三季人的博客
11-17 6837
一、概述 如果说flex是为一维布局而存在的，那么grid是为二维布局而存在的。 grid布局被称为栅格布局，也被称为网格布局，他可以将网页划分为许多个方格，我们可以在网格中填充自己的内容。 二、grid布局的基本内容 1、术语 如下图 栅格线：图中，横向或者纵向的一条线 栅格轨道：由两条相邻栅格线所包围的部分 栅格区域：由栅格线包围的矩形区域 栅格单元：最小的栅格区域 2、定义 指定容器采用网格结构通过指定它的display属性值为grid或inline-grid。 grid表示指示容器采用块级结构。
[NeRF] Instant-ngp
weixin_49003609的博客
04-23 521
instant-ngp
css grid布局fr单位理解
JasonHsu Blog_前端开发博客，专注前端开发
11-19 4970
转自 fr 简介及实例 网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。 fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%，所以多个项联合使用更有意义) 弹性尺寸使用fr尺寸单位，其来自 “fraction” 或 “fractional unit” 单词的前两个字母，表示整体空间的一部分。 css代码示例 ...
grid布局常用属性
qq_61838861的博客
02-13 2635
grid布局即网格布局（二维），flex布局（一维） <div class="wrap"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div&gt...
HTML布局之grid布局
weixin_43183219的博客
01-02 8317
容器、项目、行列、网格线、单元格、轨道的基本概念，容器属性、项目属性的详细介绍以及案例展示
Grid布局
Liang_Shun的博客
05-04 513
一、什么是Grid布局？ Flex布局是轴线布局，只能指定针对轴线的位置，可以看做是一维布局； Grid布局则是将容器划分为“行”和“列”，产生单元格，然后指定元素所在的单元格，可以看做是二维布局。 Grid布局比Flex更强大，兼容性不如Flex布局，也相对复杂一些。 二、基本概念 1.容器（可看做是一个大盒子） 2.项目（可看做装在盒子中的东西） 3.（row）行、(column)列、(g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值