我怎样才能完成这个css网格

Question

我正在努力完成这个网格：

在某种程度上，如果可能的话，不使用列（我知道使用列或引导程序很容易）但是，我假装是用角度进行ng-repeat，这样我就不用担心了新闻的顺序，所以我只是从列表中获取数据，让CSS做对齐。认为最好的方法应该是使用 nth-child 。新闻订单将从新到最后，1-7，如图所示。

到目前为止，这就是我所拥有的tried。

.main-feed .feed-item {
  margin: 1em 1%;
  float: left;
  background-color: #008edb;
  position: relative;
}

.main-feed .feed-item:nth-child(1) {
  width: 48%;
  height: 500px;
  float: left;
}

.main-feed .feed-item:nth-child(2) {
  width: 48%;
  height: 300px;
  float: left;
}

.main-feed .feed-item:nth-child(3) {
  width: 23%;
  height: 300px;
  float: left;
  clear: left;
}

.main-feed .feed-item:nth-child(4) {
  width: 23%;
  height: 400px;
  float: left;
}

.main-feed .feed-item:nth-child(5) {
  width: 23%;
  height: 100px;
  float: left;
}

.main-feed .feed-item:nth-child(6) {
  width: 23%;
  height: 100px;
  float: right;
}

.main-feed .feed-item:nth-child(7) {
  width: 48%;
  height: 100px;
  float: right;
}

<section class="main-feed">


  <div class="wrapper">
    <!--This is what i want to ng-repeat-->
    <article class="feed-item">
      <h1>1</h1>
    </article>
    <article class="feed-item">
      <h1>2</h1>
    </article>
    <article class="feed-item">
      <h1>3</h1>
    </article>
    <article class="feed-item">
      <h1>4</h1>
    </article>
    <article class="feed-item">
      <h1>5</h1>
    </article>
    <article class="feed-item">
      <h1>6</h1>
    </article>
    <article class="feed-item">
      <h1>7</h1>
    </article>
  </div>
</section>

如何让5,6,7在2以下对齐？

任何帮助表示赞赏。

Answer 1

您可以使用 CSS网格布局生成您在问题中描述的布局。有几种方法可以通过CSS网格生成布局，但最直接的方法之一是使用display: grid和grid-template-areas。

工作示例：

.main-feed {
display: grid;
grid-template-columns: 90px 90px 90px 90px;
grid-template-rows: auto;
grid-column-gap: 12px;
grid-row-gap: 12px;
grid-template-areas: 
    "article-1 article-1 article-2 article-2"
    "article-1 article-1 article-2 article-2"
    "article-1 article-1 article-2 article-2"
    "article-1 article-1 article-5 article-6"
    "article-3 article-4 article-5 article-6"
    "article-3 article-4 .         article-6"
    "article-3 article-4 article-7 article-7"
    "article-3 .         article-7 article-7"
    ".         .         article-7 article-7";
}

.feed-item {
min-height: 120px;
background-color: #008edb;
}

.feed-item h2 {
margin: 18px;
}

.main-feed article:nth-of-type(1) {
  grid-area: article-1;
}

.main-feed article:nth-of-type(2) {
  grid-area: article-2;
}

.main-feed article:nth-of-type(3) {
  grid-area: article-3;
}

.main-feed article:nth-of-type(4) {
  grid-area: article-4;
}

.main-feed article:nth-of-type(5) {
  grid-area: article-5;
}

.main-feed article:nth-of-type(6) {
  grid-area: article-6;
}

.main-feed article:nth-of-type(7) {
  grid-area: article-7;
}

<section class="main-feed">

<article class="feed-item">
<h2>1</h2>
</article>

<article class="feed-item">
<h2>2</h2>
</article>

<article class="feed-item">
<h2>3</h2>
</article>

<article class="feed-item">
<h2>4</h2>
</article>

<article class="feed-item">
<h2>5</h2>
</article>

<article class="feed-item">
<h2>6</h2>
</article>

<article class="feed-item">
<h2>7</h2>
</article>

</section>