Как я могу решить проблему макета сетки в этом случае? - PullRequest
Новая
       32

Как я могу решить проблему макета сетки в этом случае?

0 голосов
/ 11 декабря 2018

У меня есть некоторые проблемы, когда я пытаюсь создать свой раздел с помощью Grid layout.Где именно я ошибаюсь?Может кто-нибудь объяснить мне, пожалуйста?

HTML 

<body>
  <header>
    <div class="grid-wrapper">
        <div class="item1"><span>Item 1</span></div>
        <div class="item2"><span>Item 2</span></div>
        <div class="item3"><span>Item 3</span></div>
        <div class="item4"><span>Item 4</span></div>
        <div class="item5"><span>Item 5</span></div>
    </div>
 </header>
</body>

CSS 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #969d9f;
}

header {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #969d9f;
}

.grid-wrapper {
    border: 1px solid red;
    width: 1200px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

.item1, .item2, .item3, .item4, .item5 {
    border: 1px solid grey;
    background-color: #636564;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
}

.item1 { width: 750px; }

.item2 { width: 360px; }

.item3 { width: 555px; }

.item4 { width: 555px; }

.item5 { width: 1200px; }

Итак, главный вопроскак я могу правильно отобразить свои блоки и где моя главная ошибка, которую я делаю?Вот несколько фотографий: This is how it looks right now And that's how I need to display them Спасибо за внимание!

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

мое мнение

HTML 

<body>
  <header>
    <div class="grid-wrapper">
        <div class="item1"><span>Item 1</span></div>
        <div class="item2"><span>Item 2</span></div> 
        <div class="item3"><span>Item 3</span></div>
        <div class="item4"><span>Item 4</span></div>
        <div class="item5"><span>Item 5</span></div>
    </div>
 </header>
</body>

CSS 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #969d9f;
}

header {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #969d9f;
}

.grid-wrapper {
    border: 1px solid red;
    width: 1200px;
    display: grid;
    grid-gap: 20px;
    grid-template-areas: "item1 item1 item2"           /* make grid area */
                         "item3 item4 item4"
                         "item5 item5 item5";

    grid-template-columns:(1fr, 1fr, 1fr);             /* set width of colums */
}



.item1, .item2, .item3, .item4, .item5 {
    border: 1px solid grey;
    background-color: #636564;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
}

.item1 {grid-area: item1}            /* connect items with grid area */

.item2 {grid-area: item2}

.item3 {grid-area: item3}

.item4 {grid-area: item4}

.item5 {grid-area: item5}
0 голосов
/ 11 декабря 2018

Ваш макет не является сеткой " normal " (ваши строки 1 и 2 имеют ячейки с разной шириной друг от друга), поэтому для решения этой проблемы можно было бы создать больше столбцов (3/ 4/5 столбцов: это зависит от ширины ячеек и от того, равны ли биггесты [1 & 4] или нет) и играют, например, с grid-template-areas, чтобы создать элементы, которые могут ... «заполнить более 1 ячейки»: inНа заднем плане есть сетка, но с помощью этой «хитрости» вы можете трансформировать ее как макет.

Это полезное руководство для получения дополнительной информации о сетке CSS: https://css -tricks.com / snippets / css / complete-guide-grid /

Другое решениеиспользовать flexbox также для этих строк: -)

Попробуйте: 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #969d9f;
}

header {
    width: 100%;
    /*height: 100vh;*/
    display: flex;
    justify-content: center;
    background-color: #969d9f;
}

.grid-wrapper {
    border: 1px solid red;
    width: 100%;
    max-width:1200px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
    "item1 item1 item1 item2"
    "item3 item4 item4 item4"
    "item5 item5 item5 item5";
}



.item1, .item2, .item3, .item4, .item5 {
    border: 1px solid grey;
    background-color: #636564;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 40px;
}

/*.item1 { width: 750px; }

.item2 { width: 360px; }

.item3 { width: 555px; }

.item4 { width: 555px; }

.item5 { width: 1200px; }*/

.item1 {
  grid-area: item1;
}
.item2 {
  grid-area: item2;
}
.item3 {
  grid-area: item3;
}
.item4 {
  grid-area: item4;
}

.item5 {
  grid-area: item5;
}
<header>
    <div class="grid-wrapper">
        <div class="item1"><span>Item 1</span></div>
        <div class="item2"><span>Item 2</span></div>
        <div class="item3"><span>Item 3</span></div>
        <div class="item4"><span>Item 4</span></div>
        <div class="item5"><span>Item 5</span></div>
    </div>
 </header>

PS Может быть, лучше не использовать фиксированную ширину в мире мобильных устройств, поэтому я изменил ваш witdh:1200px на max-width:1200px,но вы можете изменить его, если вам все равно; -)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...