12 столбцов CSS Сетка и боковые поля / внешние желоба - PullRequest
Новая
       45

12 столбцов CSS Сетка и боковые поля / внешние желоба

2 голосов
/ 17 июня 2020

Я пытаюсь создать макет из 12 столбцов (с CSS сеткой - нет Bootstrap) на основе этого дизайна AdobeXD:

enter image description here

Вот мои размеры в пикселях для экрана P C (полная ширина экрана: 1920 пикселей): Ширина столбца: 68 пикселей (12 раз) Ширина желоба: 40 пикселей (11 раз) Наружные желоба: 228-220 пикселей (2 раза)

Как я могу установить боковые поля / внешние желоба?

Если я создам 14 столбцов (код ниже), у меня будет два дополнительных желоба шириной 40 пикселей прямо у столбцов по бокам. Можно ли настроить ширину желоба для этих двух желобов? Является ли процент правильной единицей измерения для определения столбцов шаблона сетки и промежутков между столбцами?

Каков наилучший метод в этом случае? Я почти не нахожу информации по этому поводу c topi c. 

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 Ответ

0 голосов
/ 17 июня 2020

Лучшая практика в этом случае - вообще избавиться от левого и правого желобов. В сеточной системе используется один размер grid-column-gap для одного элемента grid. Использование padding и margin для дочерних элементов grid приведет к разрыву сетки. Итак, я вижу два пути.

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