3

我正在尝试基于此 Adob​​eXD 设计创建一个 12 列布局（使用 CSS 网格 - 无引导程序）：

在此处输入图像描述

以下是我的 PC 屏幕尺寸（全屏宽度：1920 像素）： 列宽：68 像素（12 次） 装订线宽度：40 像素（11 次） 外装订线：228-220 像素（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>

4

1 回答 1

1

在这种情况下的最佳实践 - 完全摆脱左右排水沟。网格系统grid-column-gap对单个grid元素使用一个单一的尺寸。使用paddingand marginforgrid的孩子会撕裂网格。所以我看到了两种方式。

#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>

于 2020-06-17T20:23:27.790 回答