Создать сетку с помощью UIKIT

Question

Я создал следующий макет с использованием фреймворка Materialize CSS: Ссылка

.child-grid:nth-child(odd) {
    padding-right: 10px;
    padding-left: 0px;
}

.child-grid:nth-child(even) {
    padding-right: 0px;
    padding-left: 10px;
}
.row .grid-item-left {
    padding-right: 20px;
}

.row .grid-item-right {
    padding-left: 20px;
}
.grid-item img {
    display: block;
    max-width: 100%;
}
.grid-item-right .row , .grid-item-left .row{
  margin-bottom: 8px;
}

<div class="container">
  <h3 class="center-align section-title">Destinations</h3>
  <div class="row">
    <div class="col s6 m6 l6 grid-item-left">
      <div class="row">
        <img src="http://source.unsplash.com/1200x500/?usa" alt="" class="responsive-img">
      </div>
      <div class="row">
        <div class="col s6 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?uk" alt="" class="responsive-img">
        </div>
        <div class="col s6 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?canada" alt="" class="responsive-img">
        </div>
      </div>
    </div>
    <div class="col s6 m6 l6 grid-item-right">
      <div class="row">
        <div class="col s12 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?germany" alt="" class="responsive-img">
        </div>
        <div class="col s6 m6 l6 child-grid">
          <img src="http://source.unsplash.com/1200x500/?france" alt="" class="responsive-img">
        </div>
      </div>
      <div class="row">
        <img src="http://source.unsplash.com/1200x500/?italy" alt="" class="responsive-img">
      </div>
    </div>
  </div>
</div>

И я пытался создать подобное, используя UIKIT CSS Framework (версия 3.0.0-RC.17), но я не могу создать подобный макет,Как мне получить макет, который я ищу, с помощью UIKIT: Ссылка

Answer 1

В вашем коде проблема в том, что вы путаетесь со строками и столбцами по сравнению с примером материала, пожалуйста, взгляните на приведенный ниже рабочий фрагмент, который следует структуре на примере ссылки на материал.надеюсь, это поможет:)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.17/css/uikit.min.css">

<div class="uk-container">
  <h2 class="uk-heading-line uk-text-center"><span>DESTINATION</span></h2>
  <div class="uk-grid-collapse uk-child-width-1-2 uk-child-height-1-2 uk-grid" uk-grid="">
    <div class="uk-first-column">
      <div><img src="http://source.unsplash.com/620x243/?india" alt="" class="uk-padding-small"></div>
      <div class="uk-child-width-expand@s uk-text-center uk-grid uk-grid-collapse" uk-grid="">
        <div class="uk-first-column uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?nepal" alt="">
        </div>
        <div class="uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?africa" alt="">
        </div>
      </div>
    </div>
    <div>
      <div class="uk-child-width-expand@s uk-text-center uk-grid uk-grid-collapse" uk-grid="">
        <div class="uk-first-column uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?usa" alt="">
        </div>
        <div class="uk-panel uk-padding-small">
          <img src="http://source.unsplash.com/1200x500/?usa" alt="">
        </div>
      </div>
      <div><img src="http://source.unsplash.com/1200x500/?fiji" alt="" class="uk-padding-small"></div>
    </div>
  </div>
</div>