angularjs - 我怎样才能完成这个CSS网格

Question

我正在尝试完成这个网格:

在某种程度上，如果可能的话，不使用列(我知道使用列或 bootstrap 很容易)但是，我假装是用 angular 做一个 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>