css - 带有图像的 Bootstrap 网格

Question

如何获得图中这样的自定义引导网格？红色方 block 是图片吗？

我尝试使用这段代码，但它并不完全相同。我怎样才能改进它以获得相同的结果？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="container">
    <div class="row">
        <div class="col-sm-2">
            <img alt="66x66" class="media-object" data-src="holder.js/64x64" style="width: 70px; height: 70px;"
                            src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNjBiNjU1ZGVjYyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE2MGI2NTVkZWNjIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy40Njg3NSIgeT0iMzYuNSI+NjR4NjQ8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
                            data-holder-rendered="true"> 
        </div>
        <div class="col-sm-5" style="border: 1px solid black;">1</div>
        <div class="col-sm-5" style="border: 1px solid black; float: right;">2</div>
        <div class="col-sm-5" style="border: 1px solid black;">3</div>
        <div class="col-sm-5" style="border: 1px solid black; float: right;">4</div>
        <div class="col-sm-5" style="border: 1px solid black;">4</div>
        <div class="col-sm-5" style="border: 1px solid black;">6</div>
    </div>
</div>

Answer 1

当您添加 css 标签时，我想您可能想看看如何使用纯 css 和 cssgrid做同样的事情。

HTML:

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">Seven</div>
</div>

CSS:

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 1;
  grid-row: 1 / 4;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 1;
}
.three {
 grid-column: 2 / 4;
 grid-row: 2 / 3;
}
.four {
  grid-column: 2 / 4;
  grid-row: 3 / 3;
}
.five {
  grid-column: 6;
  grid-row: 1;
}
.six {
  grid-column: 6;
  grid-row: 2;
}
.seven {
  grid-column: 6;
  grid-row: 3;
}

例子: