江苏龙网

  1. 主页 > 生活百科 > >

一行 CSS 实现 10 种现代布局( 二 )

css


<div class="parent"><div class="section yellow" contenteditable>Min: 150px / Max: 25%</div><div class="section purple" contenteditable>This element takes the second grid position (1fr), meaningit takes up the rest of the remaining space.</div></div>.parent {display: grid;/分两列，一列最小150px,最大占比25%，一列自适应*/grid-template-columns: minmax(150px, 25%) 1fr;} 
，
 
 
 
4、固定的header 和 footer固定高度的 header 和 footer，占据剩余空间的 body 是经常使用的布局，我们可以利用 grid 和 fr 单位完美实现 。
<div class="parent"><header class="blue section" contenteditable>Header</header><main class="coral section" contenteditable>Main</main><footer class="purple section" contenteditable>Footer Content</footer></div>.parent {display: grid;/* 分三行，1，3行auto，2行自适应 */grid-template-rows: auto 1fr auto;} 
 
 
5、经典的圣杯布局（古典圣杯布局）可以轻松的使用 Grid 布局来实现圣杯布局，并且是弹性的 。
<div class="parent"><header class="pink section">Header</header><div class="left-side blue section" contenteditable>Left Sidebar</div><main class="section coral" contenteditable> Main Content</main><div class="right-side yellow section" contenteditable>Right Sidebar</div><footer class="green section">Footer</footer></div>.parent {display: grid;grid-template: auto 1fr auto / auto 1fr auto;}header {padding: 2rem;grid-column: 1 / 4;}.left-side {grid-column: 1 / 2;}main {grid-column: 2 / 3;}.right-side {grid-column: 3 / 4;}footer {grid-column: 1 / 4;} 
 
 
6、有意思的叠块<div class="parent white"><div class="span-12 green section">Span 12</div><div class="span-6 coral section">Span 6</div><div class="span-4 blue section">Span 4</div><div class="span-2 yellow section">Span 2</div></div>.parent {display: grid;grid-template-columns: repeat(12, 1fr);}.span-12 {grid-column: 1 / span 12;}.span-6 {grid-column: 1 / span 6;}.span-4 {grid-column: 4 / span 4;}.span-2 {grid-column: 3 / span 2;}/* centering text */.section {display: grid;place-items: center;text-align: center}可以使用该repeat()功能在 CSS 中快速编写网格 。使用：repeat(12, 1fr),对于网格模板，将会为你提供 12 列1fr
使用span关键字 。你可以设置起始线，然后设置从该起点跨越的列数 。在这种情况下，grid-column: 1 / span 12将等价于grid-column: 1 / 13，grid-column: 2 / span 6将等价于grid-column: 2 / 8
 
 
 
 
7、RAM技巧RAM，`repeat、auto-(fit|fill)和minmax()三个的简写，这在弹性布局 图片/box 这类非常有用(一行可以排放的卡片数量自动适应) 。
<div class="parent white"><div class="box pink">1</div><div class="box purple">2</div><div class="box blue">3</div><div class="box green">4</div></div>.parent {display: grid;grid-gap: 1rem;/*核心*/grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}

当前宽度是 160px（不考虑 gap），那么上面四个 box 的宽度会自适应为 160px,并且分为 4 行
当前宽度是 310px （不考虑 gap），上面四个 box 分成两行，两个 box 平分宽度
当满足一行放下 3 个box 时，第三个 box 自动到第一行
当满足一行放下 4 个 box 时，第四个 box 自动到第一行
 
 


推荐阅读


上一篇：滇红茶金螺口感,滇红茶种类哪个好

下一篇：古树滇红茶样品,滇红茶种类哪个好