#page{display:grid;width:100%;height:250px;grid-template-areas:"head head""nav main""nav foot";grid-template-rows:50px 1fr 30px;grid-template-columns:150px 1fr;}#page>header{grid-area:head;background-color:#8ca0ff;}#page>nav{grid-area:nav;background-color:#ffa08c;}#page>main{gr...
/* 指定起始行,结束行,起始列,结束列 */.child:first-child {grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:3;background: red; }/* 使用缩写形式 */.child:nth-child(2) {grid-row:2/3;grid-column:2/4;background: yellow; }/* 直接指定区域名 */.child:nth-child...
.container { background: green; display: grid; grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(3, 200px); grid-auto-flow: column; span { border: 1px solid; }} 9.2 column 垂直顺序排序 .container { background: green; display: grid; grid-template-columns: re...
grid-template-rows:repeat(3,200px) 上面的代码minmax(400px,1fr)表示列宽不小于400px,不大于1fr auto关键字 设置auto后,将由浏览器自行决定长度,尽可能的会占满剩余空间,除非有其他设置,例如有min-width之类的,利用这个关键字,我们可以轻易实现三列或者两列布局。 grid-template-columns:200pxauto200px; grid...
如果你从未见过grid-template-columns属性后面的repeat()函数,那么让我向你介绍一下CSS Grid最整洁的功能之一它是一种简写,本质上允许我们更简洁地描述重复的值。我们可以写成grid-template-columns。25% 25% 25% 25%;,但使用repeat()更加简洁,特别是当你有更多的宽度时(比如minmax()表达式)。它的语法是这样的:...
前端css 经典:grid 栅格布局 前言:flex 是一维布局、grid 是二维布局 1. 容器属性 .container {width: 500px;height: 500px;/* 容器的类型为块元素grid还是行内元素inline-grid */display: grid;border: 1px solid;/* 设置列和列宽:auto-fill,屏幕每行容纳最多的200px的盒子 */grid-template-columns: ...
Grid布局即网格布局,是一种新的CSS布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的CSS布局方案,是目前唯一一种CSS二维布局。 利用Grid布局,我们可以轻松实现类似下图布局, 演示地址:https://codepen.io/gpingfeng/pen/qBbveKB?editors=1100 ...
grid的布局的使用 0.flex布局痛点 当我使用到flex的 属性:justify-content属性中 space-between; space-around space-evenly属性值来处理空白区域的分布,最后一行可能会出现间隔过大的情况。 <!DOCTYPE html> Document .box { margin: 50px auto; display: flex; flex-wrap: wrap; width: 600px; height...
auto-fill:表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格。 grid-template-columns:repeat(auto-fill,200px) 表示列宽是 200 px,但列的数量是不固定的,只要浏览器能够容纳得下,就可以放置元素。 fr:片段,为了方便表示比例关系。 grid-template-columns:200px1fr2fr ...
如：repeat(auto-fill, minmax(100px, 1fr)); 代表了自动填充，minmanx最小值，配合flex分配空间。关于autfo-fit，autofill的区别在mdn上有解释，但是可能难理解，直接利用mdn上2个例子。grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));grid-template-columns: repeat(auto-fit, minmax(10px,...