12 列 CSS 网格布局和侧边距/外边距
Posted
技术标签:
【中文标题】12 列 CSS 网格布局和侧边距/外边距【英文标题】：12 column CSS Grid layout and side margins/outside gutters 【发布时间】：2020-10-07 10:50:37 【问题描述】：我正在尝试基于此 AdobeXD 设计创建一个 12 列布局（使用 CSS Grid - 无 Bootstrap）：
这是我的 PC 屏幕尺寸（以 px 为单位）（全屏宽度：1920px）： 列宽：68px（12倍） 装订线宽度：40px（11 次） 外排水沟：228-220px（2次）
如何设置边距/外边距？
如果我创建 14 列（下面的代码），我将在两侧的列旁边有两个 40 像素宽的额外排水沟。 是否可以为这两个装订线设置自定义装订线宽度？ 百分比是定义网格模板列和列间隙的正确度量单位吗？
在这种情况下，最佳做法是什么？ 我几乎找不到关于这个特定主题的任何信息。
body
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-size: 18px;
/* wrapper of the content*/
.wrapper
height: 100vh;
display: grid;
grid-template-columns:
11.6666667% /*220-228px here 224*/
repeat(12, minmax(0, 4,47916667%)) /*86px each*/
11.6666667% /*220-228px here 224*/
;
column-gap: 2,08333333%; /*40px*/
grid-template-areas:
"navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation navigation"
". philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy philosophy ."
". newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork newestWork ."
". categories categories categories categories categories categories categories categories categories categories categories categories ."
". testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials testimonials ."
". followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta followOnInsta ."
"footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser footerBrowser"
"copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright"
;
grid-template-rows:
1235px
858px
1307px
230px
906px
608px
528px
1fr
; /*85px*/
.navigation
background-color: turquoise;
grid-area: navigation;
.philosophy
background-color: rgba(230,45,45,0.50);
grid-area: philosophy;
.newestWork
background-color: rgba(50,115,180,0.50);
grid-area: newestWork;
.categories
background-color: rgba(120,230,45,0.50);
grid-area: categories;
.testimonials
background-color: turquoise;
grid-area: testimonials;
.followOnInsta
background-color: rgba(230,45,45,0.50);
grid-area: followOnInsta;
.footerBrowser
background-color: rgba(50,115,180,0.50);
grid-area: footerBrowser;
.copyright
background-color: rgba(120,230,45,0.50);
grid-area: copyright;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<meta name="keywords" content="portfolio, homepage" />
<meta name="description" content="portfolio" />
<meta name="author" content="Burjan Erno" />
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="grid_area_jo.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600" rel="stylesheet">
</head>
<body>
<div class="BG_gradient">
<div class="wrapper">
<section class="navigation">navigation</section>
<section class="philosophy">philosophy</section>
<section class="newestWork">newestWork</section>
<section class="categories">categories</section>
<section class="testimonials">testimonials</section>
<section class="followOnInsta">followOnInsta</section>
<section class="footerBrowser">footerBrowser</section>
<section class="copyright">copyright</section>
</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：在这种情况下的最佳做法 - 完全摆脱左右排水沟。网格系统对单个 grid 元素使用单一大小的 grid-column-gap。对grid 的孩子使用padding 和margin 会撕裂网格。所以我看到了两种方法。
#1。居中grid 无左右间隙。
完全摆脱左右差距。
.wrapper
height: 90vh;
width: 300px; /* here you can set your maximum 12 cols + 11 gaps width */
margin: 0 auto; /* this will make .wrapper centered */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 4px; /* like 40px, but the snippet is very small */
background: cyan;
.wrapper > div
background: green;
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>#2。完全没有差距
将间隙设置为 0，但会使用很多额外的元素。
.wrapper
height: 90vh;
width: 100%;
display: grid;
grid-template-columns: 100px repeat(11, 1fr 4px) 1fr 100px;
/* left gutters + 11 times column and gap-imitation + 1 column + right gutters */
.wrapper > div
background: green;
.wrapper > div:nth-child(even)
background: cyan;
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>#3。与grid-template-areas
修改步骤#2
.wrapper
height: 90vh;
width: 100%;
display: grid;
grid-template-columns: 100px repeat(11, 1fr 4px) 1fr 100px;
/* left gutters + 11 times column and gap-imitation + 1 column + right gutters */
grid-template-areas:
'. r1 . r2 . r3 . r4 . r5 . r6 . r7 . r8 . r9 . r10 . r11 . r12 .';
.wrapper > div
background: green;
.wrapper > div:nth-child(1) grid-area: r1;
.wrapper > div:nth-child(2) grid-area: r2;
.wrapper > div:nth-child(3) grid-area: r3;
.wrapper > div:nth-child(4) grid-area: r4;
.wrapper > div:nth-child(5) grid-area: r5;
.wrapper > div:nth-child(6) grid-area: r6;
.wrapper > div:nth-child(7) grid-area: r7;
.wrapper > div:nth-child(8) grid-area: r8;
.wrapper > div:nth-child(9) grid-area: r9;
.wrapper > div:nth-child(10) grid-area: r10;
.wrapper > div:nth-child(11) grid-area: r11;
.wrapper > div:nth-child(12) grid-area: r12;<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>【讨论】：
以上是关于12 列 CSS 网格布局和侧边距/外边距的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile中的 data-grid 是啥怎么用