How to create an assymetric two-column layout?

userR547 0
Viewed 26

I'm trying to create a two column layout, where the second column is moved downward a bit. Currently I create a two column layout and translateY the second column, which is odd and doesn't play nicely with flow of other elements.

Is there any way to do this in a more natural way?

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-wrap: wrap;
  width: 12.4em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 6em;
  height: 6em;
  margin: 0.1em;
  
  background-color: black;
  color: white;
}

.box:nth-of-type(2n) {
  transform: translateY(50%);
}

.box--more {
  cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>

layout css
1 Answers

As @a-haworth and @paulie_d kindly mentioned, it can be solved quite easily with css-grids by filling the gap with a placeholder item:

main {
  display: grid;
  grid-template-columns: repeat(2, fit-content(1em));
  grid-auto-rows: 1fr;
  grid-gap: 0.1em;
}

main::before {
  content: "";
  grid-area: 1 / 2;
}

.box {
  grid-row-end: span 2;
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  background-color: black;
  color: white;
}

.box--more {
  cursor: pointer;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>

userR5470
Related