Question

当我尝试使用网格布局制作我的部分时，我遇到了一些问题。我到底在哪里犯错？有人可以解释一下吗？

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; }

所以主要问题是如何正确显示我的积木，我犯的主要错误在哪里？这是一些照片：谢谢您的关注！

Answer 1

我的看法

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}

Answer 2

您的布局不是“ 正常”网格（您的第1行和第2行的单元格宽度彼此不同），因此要解决此问题，一种解决方案是创建更多列（ 3/4/5列：它取决于单元格的宽度以及最大的[1＆4]是否相等），例如，用grid-template-areas进行播放以创建可以“填充1个以上单元格”的项目“：背景中有一个网格，但是通过此“技巧”，您可以将其转换为布局。

这是有关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>

P.S。也许最好不要在移动设备中使用固定宽度，所以我用witdh:1200px更改了max-width:1200px，但是您可以更改它如果您不关心它；-）

在这种情况下，如何解决网格布局问题？

2 个答案: