CSS网格布局-石工风格但对齐

Question

我需要创建一个响应式布局以显示大量数据，并且需要在所有设备上进行访问。

我试图从视觉上解释我要在这张图片中到达的位置：

这是我用于包装纸和面板的代码。

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

Answer 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>