CSS 网格布局 - 砌体样式但对齐答案

【问题标题】：CSS Grid Layout - Masonry style but alignedCSS 网格布局 - 砌体样式但对齐
【发布时间】：2019-01-11 17:32:34
【问题描述】：

我需要创建一个响应式布局来显示大量数据，这些数据需要在所有设备上都可以访问。

我试图在这张图片中直观地解释我想要到达的位置：

这是我的 Wrapper 和面板代码。

.wrapper {
max-width: 940px;
margin: 0 20px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
background-color: #fff;
color: #444;
}

/* fix for unsuported*/
.wrapper {
display: flex;
flex-wrap: wrap;
}


.panel {
background-color: #EBEBEB;
color: #333;
border-radius: 5px;
padding: 12px;
flex: 1 1 200px;
margin: 4px;
}

【问题讨论】：

请添加带有 HTML 和 CSS 样式的最小示例。可能您的“不支持的修复”显示属性会覆盖网格布局并且它不起作用。

标签： css grid-layout css-grid

【解决方案1】：

也许此标记可以帮助您，但您需要确保其他样式不会覆盖您的 display: grid，在您的示例中很可能是您在网格后声明的 display: flex 属性弄乱了您的样式

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(200px, auto);
  grid-gap: 5px;
}

.grid-item {
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .25rem;
}

.grid-2 {
  grid-column: span 2;
}

.grid-6 {
  grid-column: span 6;
}

.grid-9 {
  grid-column: span 2
}

header {
  padding: 20px;
  background-color: rgba(0, 0, 0, .03);
  ;
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

<div class="grid-container">
  <div class="grid-item grid-1">
    <header>Grid 1</header>
  </div>
  <div class="grid-item grid-2">
    <header>Grid 2</header>
  </div>
  <div class="grid-item grid-3">
    <header>Grid 3</header>
  </div>
  <div class="grid-item grid-4">
    <header>Grid 4</header>
  </div>
  <div class="grid-item grid-5">
    <header>Grid 5</header>
  </div>
  <div class="grid-item grid-6">
    <header>Grid 6</header>
  </div>
  <div class="grid-item grid-7">
    <header>Grid 7</header>
  </div>
  <div class="grid-item grid-8">
    <header>Grid 8</header>
  </div>
  <div class="grid-item grid-9">
    <header>Grid 9</header>
  </div>
  <div class="grid-item grid-10">
    <header>Grid 10</header>
  </div>
  <div class="grid-item grid-11">
    <header>Grid 11</header>
  </div>
</div>

【讨论】：