Grid布局简单介绍及实现常见的布局

最近项目中遇到了一些css问题,通过grid布局就能很好的解决,之前grid布局没有用过也不怎么了解,所以在解决问题的过程中特地去学习了一下,主要看了阮大神的文章 。

先说说我项目的布局问题吧,就是类似于下图的这种,每块内容宽度不固定,pc上的时候3等分 ,笔记本上就2等分,每块之间需要有一定的间距。这个时候使用grid布局就非常合适。

grid布局实现如下:

<div class="container">
      <div class="item"></div>
      <!-- ....n个item -->
    </div>
.containter {
      display: grid;
      grid-template-columns: repeat(3, 33.33%);
      gap: 20px;
    }
//再根据媒体查询做适配
grid-template-columns: repeat(2, 50%);

repeat()接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。第一个参数也能是如 auto fill, auto fit等关键字,当宽度或高度不确定时每一行(或每一列)容纳尽可能多的单元格。

项目中我们经常会遇到每个块上下、左右之间需要一定的间距,而整个内容区域的外围却不需要间距 如上 彩图。这个时候使用grid布局 一个gap属性(简写属性:是row-gap和column-gap2个的简写)就能非常简单的解决。

grid实现css常见布局

一、左右两侧,左侧固定宽度,右侧自适应占满

<div class="container">
      <div class="left"></div>
      <div class="right"></div>
    </div>
.container {
      display: grid;
      grid-template-columns: 200px 1fr;
    }

二、左中右三列,左右等宽,中间自适应

<div class="container">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
.container {
      display: grid;
      grid-template-columns: 200px 1fr 200px;
    }

三、上中下三行,头部固定高,底部固定高,中间自适应占满

<div class="container">
      <div class="header"></div>
      <div class="content"></div>
      <div class="footer"></div>
    </div>
.container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 100px 1fr 200px;
      height: 100vh;
    }

fr表示比例关系,如果有多个存在 如 1fr 2fr 表示后者是前者的2倍。

有时候我们想要给某个内容一个范围的值,这个时候可以使用minmax函数,这个函数接受2个参数,顾名思义一个是最小值一个是最大值。

grid-template-rows: 100px 1fr minmax(200px, 1fr);

本文只是简单介绍一下grid布局的使用,具体知识点可以查看阮大神的文章 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值