html - 如何实现这种网格布局？

Question

我想要这样的布局

但我没有达到标题 6 和标题 7。您知道将那个 div 添加到布局中需要什么吗？

示例:http://jsfiddle.net/re221faf/1/

HTML:

<div class="card">
  <div class="title_1">
    <h6>Title 1</h6>
  </div>
  <div class="title_2">Title 2</div>
  <div class="title_3">Title 3</div>
  <div class="clear"></div>
  <div class="title_4">Title 4 </div>
  <div class="title_5">Title 5</div>

</div>

CSS:

.card {border:5px solid gray;}
.title_1{border-bottom:5px solid gray;}
.title_2{float:left; padding: 20px 0;}
.title_3{float:right; padding: 20px 0;}

.clear{clear:both;}

.title_4{border-top:5px solid gray; border-bottom: 5px solid gray;}

Answer 1

你应该看看 CSS Grid

1. > A complete guide to CSS Grid
2. > A nice game to understand CSS Grid

带有评论的工作片段:

.card{
   /* create a css grid */
   display:grid;
   /* create 4 rows, the first two take up two fractions, and the last two take up 1 fraction */
   grid-template-rows: 2fr 2fr 1fr 1fr;
   /* create 3 columns of specified sizes */
   grid-template-columns: 45% 45% 10%;
}

.card > div{
   border: 1px solid black;
   text-align:center;
}


.title_1{
   /* element starts on the first column line and ends on the third*/
   grid-column: 1 / 3;
   /* element starts on the first row line and spans one row */
   grid-row: 1 / span 1;
}
.title_2{
   grid-column: 1 / 2;
   grid-row: 2 / span 1;
}
.title_3{
   grid-column: 2 / 3;
   grid-row: 2 / span 1;
}
.title_4{
   grid-column: 1 / 3;
   grid-row: 3 / span 1;
}
.title_5{
   grid-column: 1 / 3;
   grid-row: 4 / span 1;
}
.title_6{
   grid-column: 3 / 4;
   grid-row: 1 / 2;
}
.title_7{
   grid-column: 3 / 4;
   grid-row: 2 / -1;
}

<div class="card">
  <div class="title_1">
    <h6>Title 1</h6>
  </div>
  <div class="title_2">Title 2</div>
  <div class="title_3">Title 3</div>
  <div class="title_4">Title 4 </div>
  <div class="title_5">Title 5</div>
  <div class="title_6">Title 6</div>
  <div class="title_7">Title 7</div>
</div>