2列使用bootstrap或flexbox的带有十字线边框的列表

Question

如何创建3列或4列无序列表，其中3行具有十字线边框（仅在内侧没有边框）。我想用CSS3，Bootstrap / Flexbox来做这个只用html和css。请查看最终结果的图像。非常感谢，我正在学习编码并尝试使用上述工具来构建它。

带有内边框的4列3行布局：

Answer 1

＆＃13;

＆＃13;

img {
  max-width: 100%;
}
* {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}
.wrapper {
  padding: 2em;
}
.row {
  display: flex;
}
.row > ul > li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
  /*flex: 1;*/
}
.row > ul > li {
  border-right: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}
.row > ul > li:last-child {
  border-right: none;
}
.row:last-child ul > li {
  border-bottom: none;
}

＆＃13;

<ul class="wrapper">
  <li class="row">
    <ul class="row">
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
    </ul>
  </li>
  <li class="row">
    <ul class="row">
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
    </ul>
  </li>
  <li class="row">
    <ul class="row">
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
      <li>
        <img src="http://www.cssauthor.com/wp-content/uploads/2012/12/accelrys1.png" alt="">
      </li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

如果您想占用整个页面，只需取消注释flex: 1课程中的.row > div行。

Answer 2

ImageView

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
    background: #BDBDBD;
    padding: 0;
}

.row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
.item {
    min-width: 50px;
    min-height: 50px;
    width: 25%;
    background: white;
}

div.item:nth-child(1){
    margin-right: 1px;
}

div.item:nth-child(2){
    margin-right: 1px;
    margin-left: 1px;
}

div.item:nth-child(3){
    margin-right: 1px;
    margin-left: 1px;
}

div.row:nth-child(1){
    margin-bottom: 1px;
}

div.row:nth-child(3){
    margin-top: 1px;
}