grid布局学习

最新推荐文章于 2024-04-09 09:42:15 发布

yy小肥羊

最新推荐文章于 2024-04-09 09:42:15 发布

阅读量214

点赞数 1

本文链接：https://blog.csdn.net/qq_30138187/article/details/102663577

版权

grid网格布局

今天工作清闲时刷到grid布局，之前一直没有关注，趁现在进行记录一下，该文档主要是对翻阅的资料进行整理归纳

实际需求中经常有循环展示数据的情况，以前一直用float，flex等方式，但如果在一些复杂的网页结构中，grid要更加灵活。
对于居中（特别是垂直居中）问题、还有元素的一维分布（一条线上如何分布），用flex再合适不过了。
如果涉及到二维（多行多列）确定的布局，使用Grid。
涉及到响应式的页面元素，使用flex + width百分比宽度简直太好用，因为flex天生的流式布局

发展

grid布局在2010年由Microsoft提出，目前已经成为W3C候选标准，目前还不能用于生产环境,但可以通过设置浏览器来看到效果，在Chrome中地址栏中输入chrome://flags打开浏览器实验网络平台功能，将experimental web platform features设置为enable，这样我们就可以正常使用grid,如果要在项目中使用grid布局，可以安装 css-grid-polyfill

属性

列举一些重要属性
display: grid定义一个网格容器

属性	含义	属性值
display	定义一个网格容器	Grid 以块级元素的形式显示;Inline-grid 以内联元素的形式显示;Subgrid 父级网络容器的一个子项，行和列的大小都从父级获取
grid-template-columns	网格的行数	自定义网格的宽高，单位可以是(px,em,rem,vw,vh,百分比），也可以是网格中自由空间的份数（单位fr）;定义网格线的名称，不是必须值，未设定以数字表示
grid-template-rows	网格的列数	自定义网格的宽高，单位可以是(px,em,rem,vw,vh,百分比），也可以是网格中自由空间的份数（单位fr）;定义网格线的名称，不是必须值，未设定以数字表示
grid-column-gap	定义网格之间的间距（不包括网格项目到容器边缘的间距）
grid-row-gap	定义网格之间的间距（不包括网格项目到容器边缘的间距）

还有一些自适应特性
fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块，例：grid-template-columns: 1fr 1fr 1fr;
repeat()函数，跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写。见下方九宫格实例
fit-content(), 内容适配,根据公式min（最大大小、最大值（最小大小、参数））将给定大小夹紧为可用大小

.container {
  grid-template-columns: fit-content([ <length> | <percentage> ]);
  grid-template-rows: fit-content([ <length> | <percentage> ]);
}

length：一个绝对的长度。
percentage：相对于给定轴上可用空间的百分比。

auto-fit

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。为了解决上述问题，引入
minmax() minmax()函数定义的范围大于或等于 min，小于或等于 max。

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

object-fit: cover 使图片覆盖它的整个容器

实例

经典九宫格

// html
<div class="container">
    <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>

// css
.container {
  width: 600px;
  height: 600px;
  margin: 0 auto;
	display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-template-rows: repeat(3, 30%);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.container div {
	background: red;
}

圣杯布局

// html
<div class="box">
    <div class="header">header</div>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>
// css
.box {
  width: 1200px;
  height: 80vh;
  display: grid;
  grid-template-rows: 10% 80% 10%;
}
 
.header {
  background-color: #6ac13c;
  display: grid;
  /*居中*/
  align-content: center;
  justify-content: center;
}
 
.content {
  width: 80%;
  margin: 0 auto;
  /*background-color: #f1b0b7;*/
  display: grid;
  grid-template-columns: 15% 66% 15%;
  grid-gap: 2%;
}
 
.footer {
  background-color: #ffc107;
  display: grid;
  align-items: center;
  justify-content: center;
}
 
.left {
  background-color: #5599FF;
}
.center {
  background-color: lightgreen;
}
 
.right {
  background-color: orchid;
}

双数组布局

// html
<div class="box">
	<div class="key">aaa</div>
  	<div class="key">bbb</div>
  	<div class="key">ccc</div>
	<div class="key">ddd</div>
	<div class="value">AAA</div>
	<div class="value">BBB</div>
	<div class="value">CCC</div>
	<div class="value">DDD</div>
 </div>
</body>
// css
.box{
  display: grid;
  grid-template-columns: 60px 180px;
  grid-template-rows: auto;
  grid-auto-flow: dense;
}
.key {
  grid-column-start: 1;
  grid-column-end: 2;
  justify-content: end;
}
.value {
  grid-column-start: 2;
  grid-column-end: 3;
  word-wrap: wrap;
  word-break: break-word;
}