How to create a layout using flex? - html

Question

I'm trying to create the following layout for one of my web projects. What's the best way to create that using HTML, CSS (Flex)?
I'm struggling with bottom-margin for C & D in Desktop screens, for D in Mobile screens.

Answer 1

As we don't have your code, so based on your question here i provide solution let me know if you have any question..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 mb-5">
<div class="card p-5">
A
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
B
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
C
</div>
</div>
<div class="col-md-6 mb-5">
<div class="card p-5">
D
</div>
</div>
</div>
</div>

Answer 2

You can do it like this.
.main_container {
display: grid;
grid-template-columns: auto auto;
grid-row-gap: 30px;
grid-column-gap: 30px;
}
.sections {
height: 200px;
text-align: center;
background-color: aqua;
}
/*here for mobiles inside mobile media query put this*/
.main_container {
display: grid;
grid-template-columns: auto;
grid-row-gap: 30px;
grid-column-gap: 30px;
}
<div class="main_container">
<div class="sections">A</div>
<div class="sections">B</div>
<div class="sections">C</div>
<div class="sections">D</div>
</div>

Answer 3

<div class="row">
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here A</p>
</div>
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here B</p>
</div>
</div>
<div class="cs-t20">
<!-- spacer -->
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here C</p>
</div>
<div class="col-md-6 col-lg-6 col-xl-6 col-sm-12 col-xs-12">
<p>Write text here D</p>
</div>
</div>
<div class="cs-t20">
<!-- spacer -->
</div>
</div>
<style>
.cs-t20{
width: 100%;
height: 30px;
}
</style>
Hope it will help you!! All the Best !!

Answer 4

here your go..
.cs-t20 {
width: 100%;
height: 30px;
}
.continer {
width: 100%;
height: 100%;
}
.webpage-page-display {
float: none;
display: table-cell;
}
.webpage-page-column {
z-index: 1;
float: left;
position: relative;
min-height: 1px;
}
.webpage-page-half {
margin-left: 6%;
width: 47%;
}
.webpage-page-first {
margin-left: 0px;
clear: left;
}
.webpage-page-half {
width: 100%;
}
.webpage-page-column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
#media only screen and (min-width: 320px) and (max-width: 767px) {
.webpage-page_column_table_cell {
display: block;
}
.webpage-page-half {
width: 100%;
}
.webpage-page-column {
margin: 0;
margin-bottom: 20px;
width: 100%;
}
}
<div id="webpage_section">
<div class="container">
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">
<p>Write text here A</p>
</div>
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
<p>Write text here B</p>
</div>
<div class="cs-t20"></div>
</div>
</div>
<div id="webpage_section">
<div class="container">
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-first webpage-page-half webpage-page-display">
<p>Write text here C</p>
</div>
<div class="webpage-page-column webpage-page_column_table_cell webpage-page-half webpage-page-display">
<p>Write text here D</p>
</div>
<div class="cs-t20"></div>
</div>
</div>