공부기록/웹 개발

[CSS] Grid - gap

_우지 2022. 7. 17. 14:56

https://studiomeal.com/archives/533

 

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

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “

studiomeal.com

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>