CODEWITHSUNDEEP
htmlcssflexbox
morshed
morshed

Reputation: 315

Flexbox grid: two equal length rows, top row split into two columns

I'm trying to make a layout like the following image using css flexbox.

But I'm not much familiar with flexbox anyone can help me to make this?

enter image description here

Here is what I'm trying:

.row.flex {
    display: flex;
 }

 .row [class=^"col-"] {
 	width: 200px;
 	height: 100%;
 }
<div class="row flex">
	<div class="col-xs-12 col-sm-6">
		
	</div>
	<div class="col-xs-12 col-sm-6">
		
	</div>
	<div class="col-xs-12 col-sm-12">
		
	</div>
</div>

thanks :)

Upvotes: 3

Views: 6483

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

Option 1

Set the flex container to wrap.

Make each flex item take 50% of the space. Adjust for margins with calc.

The third item, which is forced to wrap, gets flex-grow: 1, so it consumes remaining space.

.row.flex {
    display: flex;
    flex-wrap: wrap;
 }

 .row [class^="col-"] {
    flex: 0 0 calc(50% - 10px);
    height: 100px;
    margin: 5px;
    background-color: lightgreen;
 }
 
 .row [class^="col-"]:last-child {
     flex-grow: 1;
 }
<div class="row flex">
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-12"></div>
</div>

Option 2

Set the flex container to wrap.

Give each flex item just enough width to allow only two per row.

Give each item the ability to consume remaining space.

.row.flex {
    display: flex;
    flex-wrap: wrap;
 }

 .row [class^="col-"] {
    flex: 1 0 35%;
    height: 100px;
    margin: 5px;
    background-color: lightgreen;
 }
 
<div class="row flex">
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-6"></div>
     <div class="col-xs-12 col-sm-12"></div>
</div>

Upvotes: 4

Related Questions