[Vuejs]-How can I set up a dynamic grid based on flex or grid

by

3👍

✅

An alternative way of setting this up would be to use CSS grid-template-areas.

That way you have simple control of the layout for each number of items.

This snippet uses JS to find the number of items and CSS does the rest:

<style>
  .grid {
    display: grid;
    width: 100vmin;
    aspect-ratio: 16/ 9;
    gap: 1vw;
  }
  
  .grid.n1 {
    grid-template-areas: 'A';
  }
  
  .grid.n2 {
    grid-template-areas: 'A A A A A B B';
  }
  
  .grid.n3 {
    grid-template-areas: 'A A A A A B B' 'A A A A A C C' 'A A A A A C C' 'A A A A A C C';
  }
  
  .grid.n4 {
    grid-template-areas: 'A A A B B C' 'A A A B B D' 'A A A B B D' 'A A A B B D';
  }
  
  .grid.n5 {
    grid-template-areas: 'A A A B B C' 'A A A B B D' 'A A A B B E' 'A A A B B E';
  }
  
  .grid.n6 {
    grid-template-areas: 'A A A B B C' 'A A A B B D' 'A A A B B E' 'A A A B B F';
  }
  
  .grid.n7 {
    grid-template-areas: 'A A B B C C G' 'A A B B D D G' 'A A B B E E G' 'A A B B F F G';
  }
  
  .grid.n8 {
    grid-template-areas: 'A A B B C C G' 'A A B B D D H' 'A A B B E E H' 'A A B B F F H';
  }
  
  .grid>* {
    width: 100%;
    height: 100%;
    background: gray;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .grid :nth-child(1) {
    grid-area: A;
  }
  
  .grid :nth-child(2) {
    grid-area: B;
  }
  
  .grid :nth-child(3) {
    grid-area: C;
  }
  
  .grid :nth-child(4) {
    grid-area: D;
  }
  
  .grid :nth-child(5) {
    grid-area: E;
  }
  
  .grid :nth-child(6) {
    grid-area: F;
  }
  
  .grid :nth-child(7) {
    grid-area: G;
  }
  
  .grid :nth-child(8) {
    grid-area: H;
  }
</style>
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<script>
  const grid = document.querySelector('.grid');
  const n = document.querySelectorAll('.grid > *').length;
  grid.classList.add('n' + n);
</script>
👤A Haworth

Leave a comment