html - 两列卡片布局，每隔一行使用 css-grid 的双宽度卡片？

Question

我正在尝试制作原型(prototype)(使用 css-grid)一个在主要内容中包含卡片的布局。

卡片宽度为 50%，但我希望每三张卡片宽度为 100%，这样行将交替出现:2 张卡片 - 1 张卡片 - 2 张卡片 - 等等......

这甚至可以仅使用 css-grid 吗？我不想每 3 节课都要上课。

我正在考虑使用 :nth-child(3n+3)，但卡片上的卡片宽度并未确定。它是使用列在卡片容器上设置的。

        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        @                           @     @                           @
        @                           @     @                           @
        @                           @     @                           @
        @                           @     @                           @
        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@

        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        @                                                             @
        @                                                             @
        @                                                             @
        @                                                             @
        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
        @                           @     @                           @
        @                           @     @                           @
        @                           @     @                           @
        @                           @     @                           @
        @@@@@@@@@@@@@@@@@@@@@@@@@@@@@     @@@@@@@@@@@@@@@@@@@@@@@@@@@@@

这是工作原型(prototype)(但要查看上面的布局，您将不得不单击 View on JsFiddle，因为此内容太窄):

body {
  background: #ccc;
  padding: 20px;
}

.outer-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";
}

.header {
  grid-area: h;
  background-color: #ff00ff;
}

.menu {
  grid-area: m;
  background-color: #8800ff;
}

.content {
  grid-area: c;
  background-color: #0088ff;
}

.card-container {
  padding: 20px;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: none;
}

.card-container>div {
  border: 1px solid #000;
}

.footer {
  grid-area: f;
  background-color: #888888;
}

.image {
  background: yellow;
}

@media screen and (max-width: 1024px) {
  .wrapper {
    grid-template-areas: "m h h h h h h h h h h h" "c c c c c c c c c c c c" "f f f f f f f f f f f f";
  }
  .card {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .card>*:last-child {
    padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
  .wrapper {
    grid-template-areas: "h h h h h h h h h h h m" "c c c c c c c c c c c c" "f f f f f f f f f f f f";
  }
  .card-container {
    grid-template-columns: 1fr;
  }
  h2 {
    text-align: center;
  }
}

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="header">Header</div>
    <div class="menu">MENU</div>
    <div class="content">
      <h1> Content Well</h1>
      <div class="card-container">
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet. Asperiores autem deleniti non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, illum in non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem deleniti eligendi illum in non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem deleniti eligendi illum in non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">FOOTER</div>
  </div>
</div>

View on JSFiddle

Answer 1

工作 fiddle : https://jsfiddle.net/07x2tcyx/

您需要更改一些简单的东西以使其看起来像您想要的布局:

• 对于 .card 你需要定义所有的 3n 张卡片 即 3,6,9..(我们将从 1-3 拉伸(stretch)它，即它占据 2 列空格):

  .card:nth-child(3n){ grid-column: 1 / 3; }
  

对于 max-width < 768px 的媒体查询添加:

.card:nth-child(3n){ grid-column: 1 / 2; }

body {
  background: #ccc;
  padding: 20px;
}

.outer-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
}

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 1fr 50px;
  grid-template-areas: 
    "h h h h h h h h h h h h" 
    "m m c c c c c c c c c c" 
    "f f f f f f f f f f f f";
}

.header {
  grid-area: h;
  background-color: #ff00ff;
}

.menu {
  grid-area: m;
  background-color: #8800ff;
}

.content {
  grid-area: c;
  background-color: #0088ff;
}

.card-container {
  padding: 20px;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: none;
}

.card:nth-child(3n){ grid-column: 1 / 3; }

.card-container > div {
  border: 1px solid #000;
}

.footer {
  grid-area: f;
  background-color: #888888;
}

.image {
  background: yellow;
}

@media screen and (max-width: 1024px) {
  .wrapper {
    grid-template-areas: 
    "m h h h h h h h h h h h" 
    "c c c c c c c c c c c c" 
    "f f f f f f f f f f f f";
  }
  .card {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .card > *:last-child{
    padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
  .wrapper {
    grid-template-areas: 
    "h h h h h h h h h h h m" 
    "c c c c c c c c c c c c" 
    "f f f f f f f f f f f f";
  }
  .card:nth-child(3n){ grid-column: 1 / 2; }
  .card-container {
    grid-template-columns: 1fr;
  }
  h2 {text-align: center;}
}

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="header">Header</div>
    <div class="menu">MENU</div>
    <div class="content">
      <h1> Content Well</h1>
      <div class="card-container">
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet. Asperiores autem deleniti non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, illum in non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem deleniti eligendi illum in non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
        <div class="card">
          <div class="image">IMAGE</div>
          <div>
            <h2>Content Card</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem deleniti eligendi illum in non quae quibusdam quidem rerum veritatis!</p>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">FOOTER</div>
  </div>
</div>