文章/答案/技术大牛

发布

社区首页 >问答首页 >12栏CSS网格布局和边距/外间距

问12栏CSS网格布局和边距/外间距
EN

Stack Overflow用户

提问于 2020-06-17 22:59:29

回答 1查看 2.5K关注 0票数 2

我正在尝试创建一个基于这个AdobeXD设计的12列布局(使用CSS Grid - no Bootstrap)：

以下是我在PC屏幕上的尺寸(全屏宽度: 1920px)：列宽: 68px (12倍)间距宽度: 40px (11倍)外部间距: 228-220px (2倍)

如何设置侧边距/外部边距？

如果我创建了14列(下面的代码)，我将有两个40px宽的额外间隔，就在边上的列旁边。是否可以为这两个间隔设置自定义间隔宽度？百分比是定义网格-模板-列和列间距的正确度量单位吗？

这种情况下的最佳实践是什么？我几乎找不到任何关于这个特定主题的信息。

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

Stack Overflow用户

回答已采纳

发布于 2020-06-18 04:23:28

在这种情况下，最好的做法就是完全去掉左边和右边的阴沟。网格系统对单个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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62432045

复制

相似问题

问12栏CSS网格布局和边距/外间距
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问12栏CSS网格布局和边距/外间距EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问12栏CSS网格布局和边距/外间距
EN