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

【问题标题】：How can I resolve Grid layout problem in this case?在这种情况下如何解决网格布局问题？
【发布时间】：2019-05-12 12:28:36
【问题描述】：

当我尝试使用网格布局制作我的部分时遇到了一些问题。我到底在哪里犯错？谁能给我解释一下？

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

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

【问题讨论】：

标签： html css layout flexbox css-grid

【解决方案1】：

您的布局不是“正常”网格（您的第 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>

附：也许最好不要在移动设备的世界中使用固定宽度，所以我用max-width:1200px 更改了您的witdh:1200px，但是您可以更改它如果你不关心它;-)

【讨论】：

感谢您的建议！我要试试你的解决方案！希望它对我能正常工作:)

【解决方案2】：

我的意见

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}

【讨论】：

对不起，网格项目宽度出错了！！！请参阅上面的 ReSedano 评论！