The Quantum Physicist The Quantum Physicist - 5 months ago 9
CSS Question

HTML: CSS: Place element somewhere by class

Say I have 6 elements:

<img src="..." class="a"/>
<img src="..." class="b"/>
<img src="..." class="c"/>
<img src="..." class="d"/>
<img src="..." class="e"/>
<img src="..." class="f"/>


which are not necessarily images like shown above, but can be any element, like some
<div>
.

Is it possible to create a grid of 3x2 and place each element of these in one container?

Answer

Just using classes as you pretend, mixing a lot of elements as you don't know which will be used.

option #1 - using flexbox

body {
  margin: 0
}
#flex {
  display: flex;
  flex-wrap: wrap;
  height:100vh
}
.a,
.b,
.c,
.d,
.e,
.f {
  flex: 1 0 calc(100% / 3);
  height:50%;
  background: lightblue;  
}
<div id="flex">
  <div class="a">div with Class A</div>
  <img class="b" src="//lorempixel.com/100/100" />
  <span class="c">span with Class C</span>
  <article class="d">article with Class D</article>
  <div class="e">div with Class E</div>
  <section class="f">Div with Class F</section>
</div>

option #2 - using inline-block

body,html {
  margin: 0;
  height:100%
}
#ib {
  font-size: 0;
  height:100%
}
.a,
.b,
.c,
.d,
.e,
.f {
  display: inline-block;
  vertical-align: top;
  background:lightblue;
  width: calc(100% / 3);
  height:50%;
  font-size: 16px
}
<div id="ib">
  <div class="a">div with Class A</div>
  <img class="b" src="//lorempixel.com/100/100" />
  <span class="c">span with Class C</span>
  <article class="d">article with Class D</article>
  <div class="e">div with Class E</div>
  <section class="f">Div with Class F</section>
</div>

Comments