HTML: CSS: Place element somewhere by class - html

Question

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 1

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>

Answer 2

I just tried using CSS :nth-child() Selector and you can move required elements to next line and form matrix
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
<div class="e">5</div>
<div class="f">6</div>
div {
display: inline;
}
div:nth-child(4) {
display: inline;
}
div:nth-child(3):after {
content: "\a";
white-space: pre;
}
Hope this is helpful for you :)
codepen URL for reference -http://codepen.io/nagasai/pen/BzNmBz

Answer 3

Note the th tag is for headings, tr tag for rows and td tag is where you need to write your data. Hope this helps
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
`

Answer 4

The generic approach to this is to use a class for the container in which the items will be laid out, and a class for each item that will be in the container.
This sample mostly takes the form of #dippas' "using flexbox" example, but the CSS styles are not particular to any set of ids or classes ... you can attach the additional class if necessary. <div class="a">...</div> could become <div class="a grid-item">...</div> or omit the class a as I do.
You can see you just attach the grid-item class to any sort of thing you want.
This can also be styled using the inline-block method if that's preferable.
UI frameworks commonly take this approach, where you just attach the appropriate class(es) to your elements to give them the layout / style desired.
.grid-container {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
.grid-item {
flex: 1 0 calc((100% / 3) - 4px);
height: 50%;
background-color: antiquewhite;
border: 1px dotted burlywood;
border-collapse: collapse;
}
<div class="grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
<span class="grid-item">C</span>
<img class="grid-item" src="//lorempixel.com/100/100" />
<section class="grid-item">Section E</section>
<div class="grid-item">F</div>
</div><!-- grid-container -->
You can even omit the class for the items if everything in the grid-container will be laid out like this...
.grid-container {
display: flex;
flex-wrap: wrap;
height: 100vh;
}
/* select all immediate children of the .grid-container */
.grid-container > * {
flex: 1 0 calc((100% / 3) - 4px);
height: 50%;
background-color: antiquewhite;
border: 1px dotted burlywood;
border-collapse: collapse;
}
<div class="grid-container">
<div>div A</div>
<div>div B</div>
<span>span C</span>
<img src="//lorempixel.com/100/100" />
<section>section E</section>
<div>div F</div>
</div><!-- grid-container -->