[CSS] Grid - gap

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

GAP

gap 을 20px 을 준 레이아웃은 다음과 같다.

이전에는 grid-gap 이라는 이름으로 사용했다고 한다.

 <style>
      /* gap */
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, minmax(100px, auto));
        /* grid-gap: 20px; 예전 버전 */
        gap: 20px;
      }
</style>

 

row-gap

<style>
      /* gap */
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, minmax(100px, auto));
        row-gap: 20px;
      }
</style>

column-gap

<style>
  /* gap */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, minmax(100px, auto));
    column-gap: 20px;
  }
</style>