Arrangement of elements in html

Question

Is possible to achieve this structure using html + css ?

But instead of having that vertical space between orange blocks I want to be one in the top of another.

I have used flex and grid but not really succeed so far :(

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
  width: calc(60% - 22px);
  padding: 10px;
  background: lime;
  height: 100px;
  margin-bottom: 10px;
}

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

You can re-arragne the div

I AM BIG 1

I AM SMALL 1

I AM BIG 2

I AM SMALL 2

I AM BIG 3

I AM BIG 4

or if you dont want to re-arrange the html structure then you can make use of order property in css. ref: https://css-tricks.com/almanac/properties/o/order/ — Mangesh, May 23 '19 at 06:40
You might be able to do that using the `grid-area`. Here is a very helpful guide: https://css-tricks.com/snippets/css/complete-guide-grid/ — Fabio Zanchi, May 23 '19 at 06:41
You can use Bootstrap framework to achieve your task. Why to write custom code if you already have something ready-made, you can use framework and can focus on your other dev tasks. — SylvesterTheKid, May 23 '19 at 07:14

score 5 · Accepted Answer · answered May 23 '19 at 06:40

You can do this easily with CSS grid layout:

you can use grid-template-columns: 3fr 2fr; because you have 60% to 40% ratio of the big and small elements,
row heights can be set using grid-auto-rows: 100px,
margin between rows can be set using grid-row-gap property,
now set the big to always occupy the first column using grid-column: 1 and the small to always occupy the second.

See demo below for the configuration upto now:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1;
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2;
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

Now just add grid-auto-flow: dense to pull the orange blocks to the top - see demo below:

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr; /* two columns */
  grid-auto-rows: 100px; /* row height */
  grid-row-gap: 10px; /* gap between rows */
  grid-auto-flow: dense; /* added */
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1; /* in first column */
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2; /* in second column */
}

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

That look nice and exactly what I need but if I have 3 sizes will be possible as well? I mean 3 blocks like 30% 40% and another 30% — BurebistaRuler, May 23 '19 at 06:58

score 3 · Answer 2 · answered May 23 '19 at 06:41

If you are planning on using flex I would suggest you break up your container into two columns which makes it easier to do this. This a test code I have done to achieve that. Hope it helps you.

HTML

<div class="d-flex flex-row">
  <div class="d-flex flex-column mr-1">
    <div class="big-box">
      BOX 1
    </div>
    <div class="big-box">
      BOX 2
    </div>
    <div class="big-box">
      BOX 3
    </div>
    <div class="big-box">
      BOX 4
    </div>
  </div>
  <div class="d-flex flex-column">
    <div class="small-box">
      BOX 5
    </div>
    <div class="small-box">
      BOX 6
    </div>
  </div>
</div>

CSS

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.big-box {
  background-color: green;
  width: 400px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.small-box {
  background-color: orange;
  width: 300px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.mr-1 {
  margin-right: .5rem;
}

JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/uvr0hzkw/

Nayantara Jeyaraj · Answer 3 · 2019-06-03T05:16:20.400

1

You can simply modify this by changing the order of your divs as

<div class="container">
    <div class="big"> I AM BIG 1</div>
    <div class="small"> I AM SMALL 1</div>
    <div class="big"> I AM BIG 2</div>
    <div class="small"> I AM SMALL 2 </div>
    <div class="big"> I AM BIG 3</div>
    <div class="big"> I AM BIG 4</div>  
</div>

Hope this is what you've been looking for.

edited Jun 03 '19 at 05:16

answered May 23 '19 at 06:40

Nayantara Jeyaraj

2,624
7
34
63

score 0 · Answer 4 · answered May 23 '19 at 07:01

.main{
border: 1px solid red;
padding: 5px;
display:flex;
justify-content:space-between;
}
.left{
width:59.8%; 
}
.right{
width:39.8%;
position:relative;
display:block;
}
.right .orange-block:last-child{
  position:absolute;
  display:block;
  bottom:0;
  width: -webkit-fill-available;
}
.lime-block,.orange-block{
  margin-bottom:5px;
  height:80px;
  padding:5px;
}
.lime-block:last-child,.orange-block:last-child{
  margin-bottom:0px;
}
.lime-block{
  background:lime;
}
.orange-block{
  background:orange;
}

<body>
<div class="main">
<div class="left">
  <div class="lime-block">I AM BIG 1</div>
  <div class="lime-block">I AM BIG 2</div>
  <div class="lime-block">I AM BIG 3</div>
  <div class="lime-block">I AM BIG 4</div>
</div>
<div class="right">
  <div class="orange-block">I AM SMALL 1</div>
  <div class="orange-block">I AM SMALL 2</div>
</div>
</div>
</body>

it's a simple code as you want in flex based and also it support to do dynamic content. — Akash Singh, May 23 '19 at 07:02

Arrangement of elements in html

4 Answers4

Linked