CODEWITHSUNDEEP
htmlcsscss-gridgutter
Julia Baro
Julia Baro

Reputation: 43

12 column CSS Grid layout and side margins/outside gutters

I am trying to create a 12 column layout (with CSS Grid - no Bootstrap) based on this AdobeXD design:

enter image description here

Here are my sizes in px for PC screen (full screen width: 1920px): Column width: 68px (12 times) Gutter width: 40px (11 times) Outside gutters: 228-220px (2 times)

How can I set side margins/outside gutters?

If I create 14 columns (code below) I will have two 40px wide extra gutters right by the columns on the sides. Is it possible to set a custom gutter width for these two gutters? Is percentage the right unit of measurement for defining grid-template-columns and column-gaps?

What is the best practice in this case? I hardly find any information on this specific topic.

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>

Upvotes: 2

Views: 6025

Answers (1)

focus.style
focus.style

Reputation: 6750

The best practice in this case - to get rid of left and right gutters at all. Grid system uses one single size of grid-column-gap for a single grid element. Using padding and margin for grid's children will tear the grid. So i see two ways.

#1. Centered grid without left and right gap.

Getting rid of left and right gap at all. 

.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. No Gaps at all

Set gaps to 0, but using a lot of extra elements.

.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. With grid-template-areas

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

Upvotes: 1

Related Questions