cuadros x2 y x1

by vidatraslapc

HTML

<div class="app_lista_contenido ma oh">
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">11 food</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">222 food texto largo largo largo largo largo largo largo largo largo largo largo largo largo</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">333 food</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">444 food texto largo largo largo largo largo largo largo largo largo largo largo largo largo</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">555 food</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">666 food</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">777 food</div>
  </div>
  <div class="app_lista_item oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">888 food</div>
  </div>
  <div class="app_lista_item destacado oh rod">
    <img src="http://lorempixel.com/200/200/food" class="app_lista_item_imagen db rod" />
    <div class="app_lista_item_nombre">destacado 2</div>
  </div>
  <div class="app_lista_item destacado2 oh rod">
    <img...

CSS

.app_lista_contenido {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 500px;
  margin: 0 auto;
}
.app_lista_item {
  border: 1px solid;
}

.app_lista_item.destacado, .app_lista_item.destacado2{
  grid-column:1/3;
 }
.app_lista_item.destacado{
  grid-row:2/3;
}
.app_lista_item.destacado2{
  grid-row:5/6;
}
img{
  width: 100%;
}