【问题标题】：12 column CSS Grid layout and side margins/outside gutters12 列 CSS 网格布局和侧边距/外边距
【发布时间】：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>

【问题讨论】：

标签： html css css-grid gutter

【解决方案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>

【讨论】：

#1。居中grid 无左右间隙。

#2。完全没有差距

#3。与grid-template-areas

#1。居中`grid` 无左右间隙。

#3。与`grid-template-areas`