display: flex, grid

by Kim Ara

HTML

<div>
  <h2>grid</h2>
  <ul class="grid">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>  
  
  <hr>
  
  <h2>flex</h2>
  <ul class="flex">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>


</div>

SCSS

/* div {
  display: flex;
  align-items: flex-start;
  gap: 20px;
} */

ul {
  width: 520px;
  padding: 10px;
  border: 1px solid #aaa;
  
  li {
    list-style: none;
    background-color: #eee;
    
    &:nth-child(even) {
      background-color: #ddd;
    }
  }
  
  &.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    li {
      width: calc(500px/3);
      height: 200px;
      
      &:nth-child(3n-1) {
        transform: translateY(50px);  
      }
    }
  }
  
  
  &.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
  }

}