Как создать макет с помощью flex?

Question

Я пытаюсь создать следующий макет для одного из моих веб-проектов.Какой лучший способ создать это с использованием HTML, CSS (Flex)?

Я борюсь с нижним полем для C & D на экранах рабочего стола, для D на экранах для мобильных устройств.

Answer 1

Вы можете сделать это так.

.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 2

Поскольку у нас нет вашего кода, поэтому, основываясь на вашем вопросе, я предоставлю решение, дайте мне знать, если у вас есть какие-либо вопросы ..

<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 3

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>

Answer 4

<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>

Надеюсь, это поможет вам!Всего наилучшего !!