我怎样才能做到这一点的CSS网格

Question

我试图做到这一点电网：

在某种程度上说，如果可能的话，不使用的列（我知道它使用的列或引导是很容易），但，我假装是用角度做一个ng-repeat，这样我就不必担心新闻的顺序，所以我只是从列表中取数据并让CSS完成对齐的工作。认为最好的方式应该是使用第十一个孩子。新闻订单将从更新到最后，如图所示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 Grid Layout来生成您在问题中描述的布局。有几种方法可以通过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>