Grid

gang_shik·2025년 3월 12일

CSS grid

CSS

목록 보기

12/13

Grid 개요

FlexBox의 경우 교차축이 존재하지만 주축에서만 여러개의 item이 있음, 속성을 변경해야지만 줄바꿈으로 여러개의 아이템이 생김
Grid의 경우 본격적으로 주축과 교차축 전부의 Item들이 있음
Container가 있지만, 먼저 행과 열을 만들고 그에 맞게 배치를 하고 그 안에 차례대로 아이템이 자리를 잡은 형태임
Column & Row를 사용함(row는 가로줄 하나고 column은 세로줄임), 여기에 gutter라는 행과 열 사이의 공백을 표현하기도 함
행과 열 사이의 공백을 gap이라도 표현해서 처리하기도 함
행과 열의 개수에 따라서 전체적인 Grid Layout이 바뀌고 변하게 됨
테이블에서의 열병합, 행병합 등도 할 수 있음
주로 커머스에서 상품 카드 배치등에서 볼 수 있음
참고자료

Container display

display에서 grid 속성을 줘서 grid 박스 형태를 줄 수 있음
만약 여기서 Container도 마찬가지로 다른 요소로 바꾸고 싶다면 아래 예시처럼 inline-grid 형태로 할 수 있음
즉, 외부 & 내부 레이아웃에 대해서 병행해서 쓸 수 있음
그리고 아무리 예시와 같이 만든다고 하여도, 실제 태그 상에서는 형제 관계로 되어 있음
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    width: 150px;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

Container grid-template-rows, grid-template-columns

Grid도 마찬가지로 Container에서 쓰는 것과 Items에서 쓰는 것이 다 다름
grid-template-rows의 경우 Container에서 씀
이 때 몇 개의 세로(열)을 쪼개고 싶다면 grid-template-columns를 쓰면 됨
몇 열으로 얼마만큼의 크기의 열로 만들 지 px 단위로 예시처럼 만들 수 있음
각각의 column의 너비를 줄 수 있음
그 다음 각각의 행 rows에 대해서 grid-template-rows를 써서 크기를 조정할 수 있음
예시는 결국 3x2의 grid를 만든 것임, 만약 이 grid를 넘어서서 item을 넣게 된다면 item만큼의 크기만 차지하게 됨
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows: 100px 100px;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

여기서 fr 단위도 쓸 수 있음, 이 단위를 토대로 fr로 준만큼 비율을 주는 것임
아래 예시대로라면 2:1 비율을 가지는 것, 이 비율은 값을 준만큼 바뀌는 것임(그리고 이는 만약 height가 정해지면 그 비율만큼 길이를 나눠가지는 것임)
예시

.container {
    border: 5px dashed orange;
    height: 400px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

이처럼 grid-template-*을 통해서 몇개의 행과 열을 만들지 정해서 그리드의 비율을 정하여 그리드를 만들 수 있음
만약 이렇게 fr이 반복되면 아래와 같이 함수를 통해서 줄일 수도 있음
예시

.container {
    border: 5px dashed orange;
    height: 400px;

    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(4, 1fr);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

Container grid-template-areas

한 칸이 아닌 여러 개의 행과 열을 차지하게끔 할 수 있음, 그리고 자리를 차지않게 빈칸으로도 둘 수 있음(마치 땅따먹기를 하듯이)
여기서 주의할 점은 각각의 아이템 덩어리가 박스모델 형태로 지정해야함(ㄷ이나 ㄴ같은 형태는 안됨)
아래처럼 칸이 남을 경우, 이에 대해서 grid-template-areas를 활용해서 아래와 같이 header, main, sidebar, footer처럼 할 수 있음
각 영역이 본인의 영역을 차지할 수 있게끔 만들 수 있는 것임 하지만 이에 대해서 grid의 이름을 붙여줘야함
grid-area를 통해서 이름을 붙일 수 있음, 이를 활용해서 grid-template-areas로 배치해서 처리할 수 있음
그러면 그에 맞는 각각의 칸을 차지함을 확인할 수 있음(이 때 아래와 같이 .을 사용하면 그 칸은 띄워둘 수 있음)
예시

    <div class="container">
      <div class="item header">header</div>
      <div class="item main">main</div>
      <div class="item sidebar">sidebar</div>
      <div class="item footer">footer</div>
    </div>

.container {
    border: 5px dashed orange;
    width: 400px;
    height: 400px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        "hd hd hd hd ."
        "ma ma ma . sb"
        ". ft ft ft ft";
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

.header {
    grid-area: hd;
}
.main {
    grid-area: ma;
}
.sidebar {
    grid-area: sb;
}
.footer {
    grid-area: ft;
}

참고자료

Container row-gap, column-gap, gap

row-gap은 각각의 row의 행들간의 간격을 준 값만큼 띄워줌(row-gap으로만 써도 됨, grid-row-gap은 deprecated됨)
column-gap은 column의 열들간의 간격을 준 값만큼 띄워줌
이렇게 gap을 주게 되면, 그 gap만큼 띄워주고 grid로 남은 공간을 나눠서 비율을 가져감(중간의 간격을 주는 것)
단축 속성을 gap을 쓰면 row, column에 각각 gap을 주게됨(앞이 row, 뒤가 column임)
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>

.container {
    border: 5px dashed orange;
    width: 400px;
    height: 400px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    row-gap: 20px;
    column-gap: 50px;
    /* gap: 20px 50px; */
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

Container grid-auto-rows, grid-auto-columns

앞서 배운 grid-template-rows와 colums의 경우, Item 개수와 상관없이 행과 열에 대해서 명시적으로 row & column을 만듬
즉, 3x2 grid를 만들고 아이템이 6개를 넘어가게 되면 이미 명시적으로 만든 row & column을 넘어서서 grid가 할당되거나 차지하지 않음
이러한 추가된 아이템과 grid를 넘어서 넘쳐 흐른 아이템들에 대해서 row와 colum의 크기를 지정해 줄 수 있음
정리하면 template에 명시적으로 작성하지 못했지만 넘쳐나는 grid item에 암시적으로 그 높이와 너비를 지정할 수 있음
각각 row & column으로 px을 준다는 것임(columns의 경우 만약 그 아이템이 다른 위치로 들어갈 때도 auto-columns의 크기대로 들어감)
auto의 경우 암시적인 의미를 띈다고 생각하면 됨
하지만 아이템이 즉, 넘쳐 흐르는 아이템이 없다면 이 크기를 알 수 없음
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
      <div class="item">*</div>
    </div>

.container {
    border: 5px dashed orange;
    width: 400px;
    height: 400px;

    display: grid;
    grid-template-columns: 100px 150px 80px;
    grid-template-rows: 1fr 1fr 1fr;

    grid-auto-rows: 100px;
    grid-auto-columns: 50px;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

Container grid-auto-flow

Item들이 자동으로 자리를 잡아서 배치할 지에 대해서 처리하는 속성 즉,item들이 자기 자리를 찾아가는데 있어서 어떠한 기준으로 찾아가게 할 지 처리하는 것
주로 row, column등으로 처리할 수 있음(디폴트 값은 row 행 방향으로 자리를 잡음, column으로 하면 순서대로 열 방향으로 자리 잡음)
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    grid-auto-flow: column;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

이 때 dense라는 속성을 붙일 수 있는데, 빈 영역에 대해서 다른 Item들이 그 공간을 차지하게 됨(예시와 같이, column dense도 마찬가지)
즉, grid container에 대해서 빈 영역 없이 채우게 될 지 dense를 통해서 처리하는 것이고 이런식으로 grid 나름의 알고리즘이 있음
예시

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    grid-auto-flow: row dense;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

.item:nth-child(2) {
    grid-column: span 3;
}

참고자료

Container grid(shorthand)

앞서 grid에서 본 여러가지 속성을 같이 쓸 수 있는 단축 속성임
grid-template-rows, grid-template-columns, grid-template-areas, gird-auto-rows, gird-auto-columns, grid-auto-flow를 다 쓸 수 있음
앞의 3개는 명시적인 속성이고, 뒤의 3개는 암시적인 속성임(명시적으로 보이는 것과 암시적인 것은 직접 지정하지 않아도 처리하기 때문에)
슬래시(/)를 기준으로 구분함, 주로 앞 부분이 row에 대해서고 뒤 부분이 column 부분임
이 때, row만 명시적으로 쓰고 column은 암시적으로 쓸 수 있음(그 반대도 가능)
이 2가지 속성을 row & column 각각 원하는 속성들을 넣어주면 됨
이 말은 아래 예시처럼 키워드를 암시적으로 쓰고 싶은 영역에 넣어주는 것을 의미함(딱 맞는 속성에 맞게 값을 넣어주면 됨)
그 값에 맞게 해석하면 됨
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;

    grid: 1fr 2fr / auto-flow 100px 200px;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

참고자료

Container justify-content, align-content

justify-content의 경우, Container가 Item보다 커서 남는 공간이 있어야 적용할 수 있음
그리고 마찬가지로 주축(가로축) 기준으로 정렬을 할 수 있음
주축 기준으로 기본값은 start임, end는 끝으로 가고, center는 가운데로 감
space-between, space-around도 마찬가지로 적용이 가능함(원리는 같음, space-around의 경우 앞뒤 간격, space-between은 사이 간격으로)
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

.container {
    border: 5px dashed orange;

    width: 100%;
    height: 500px;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);

    justify-content: space-around;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

align-content의 경우, 교차축(세로축) 기준으로 정렬을 할 수 있음
기본값이 start, 끝은 end, center로 됨
만약 정중앙으로 두고자 한다면 justify-content와 align-content 둘 다 center로 둘 수 있음
마찬가지로 space-around, space-between 사용 가능함
이 때 justify-content로 동일하게 한다면 다 분리가 됨
결과적으로 전체 컨테이너 기준으로 내부 아이템을 어떻게 배치할 지에 대해서 정의하는 속성값임
예시

.container {
    border: 5px dashed orange;

    width: 100%;
    height: 500px;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);

    justify-content: space-between;
    align-content: space-between;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

Container justify-items, align-items

justify-items, align-items는 하나의 item에 대한 처리를 이야기함
전체 grid box 기준으로 전체 items나 행 & 열은 전혀 의미가 없음
각각 하나의 칸 안에 들어간 아이템을 어떻게 정렬할 것인지 지정하는 속성들임
기본값이 stretch인데, justify-items를 처리하면 그 지정한 위치대로 붙음(만약 별도의 크기를 지정하지 않으면)
하지만 예시대로 하나의 특정 아이템 크기를 둔다면, justify-items 기준으로 위치가 조정이 됨(이 때, justify-self를 하면 해당 아이템만 됨)
이것도 결국 justify이기에 주축을 기준으로 처리함
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

.container {
    border: 5px dashed orange;

    width: 100%;
    height: 500px;

    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);

    justify-items: center;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
    width: 100%;
    height: 100%;
}

.item:nth-child(1) {
    width: 50px;
    height: 50px;
}

.item:nth-child(2) {
    justify-self: end;
}

align-items도 동일하게 stretch가 기본값으로 교차축을 기준으로 아이템들이 처리됨
이를 2개 다 활용해서 위치를 조정할 수 있음
예시

.container {
    border: 5px dashed orange;

    width: 100%;
    height: 500px;

    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);

    justify-items: end;
    align-items: end;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
    width: 100%;
    height: 100%;
}

.item:nth-child(1) {
    width: 50px;
    height: 50px;
}

Item grid-row, grid-column

grid-row 자체가 단축속성임(grid-row-end, grid-row-start의 조합)
슬래시(/)를 통해 한 줄로 쓸 수 있음(구분해서)
기본 grid에서는 grid-row-start, grid-row-end를 설정하지 않는다면, 딱 1칸만 차지하게 됨
이럴 때 넓게 걸쳐서 차지하게 하고 싶을 때 쓰는 속성들임(어디 row에서 시작하고 끝나는지 처리하는 것)
여기서 지정하는 숫자는 일반적인 양수값으로 직관적으로 칸을 세서 하면 안됨, 각 선에 숫자가 이미 지정되어 있음(grid display일 경우)
즉, 행과 열이 아닌 grid 선에 대한 숫자를 나타내는 것임
뒤에서부터 계산하면 마이너스이기 때문에 마이너스값도 처리할 수 있음(1~3과 -4~-2가 동일함)
하지만 이는 명시적으로 지정한 row-column만 사용할 수 있음(template을 사용하는 것)
꼭 숫자를 맞출 것 없이 예시처럼 선을 확인하고 그 값에 맞게 넣어주면 됨
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 1fr);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

.item:first-child {
    background-color: coral;

    grid-row-start: 1;
    grid-row-end: -1;
}

grid-row로 한 번에 작성가능한 것임
그리고 grid-column도 동일하게 선의 값을 가지고 있고 처리방식도 동일하다고 볼 수 있음
마지막으로 span을 작성하게 되면 현재 영역을 기준으로 몇 칸까지 늘어날지 지정할 수 있음
예시

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(5, 100px);
    grid-template-columns: repeat(3, 1fr);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

.item:first-child {
    background-color: coral;

    /* grid-row-start: 1;
    grid-row-end: -1; */
    /* grid-row: 1 / -1; */
    grid-row: 2 / span 2;
    grid-column: 2 / -1;
}

Item grid-area

grid-template-areas가 구분하기 위해서 grid-area를 통해서 적용할 그 이름과 값을 지정할 수 있었음
하지만 그렇게만 쓰는 게 아닌, grid-row-start, grid-column-start, grid-row-end, grid-column-end를 같이 처리할 수 있는 단축속성임
슬래시(/)를 통해서 처리할 수 있음(위에서 설명한 순서대로 써야함 row-start, column-start, row-end, column-end 순임)
즉, 2가지 형태로 사용되는 것임
예시

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 1fr);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

.item:first-child {
    background-color: coral;

    grid-area: 4 / 2 / span 2 / -1;
}

참고자료

Item order

Order를 정하지 않으면 마크업과 순리대로 흘러가게 됨, 아이템들 하나하나가 기본이 0으로 되어 있기 때문에(같은 값인 경우 코드 순서대로 처리함)
마이너스값이 되면 기본값이 0들이므로 맨 앞으로 이동하고 양수값을 쓰면 맨 뒤로 가게됨
값으로 정수만 사용이 가능함(소수점은 불가능)
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 1fr);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
}

.item:nth-child(5) {
    order: -1;
}

.item:nth-child(3) {
    order: 1;
}

참고자료

Item z-index

z-index는 기본적인 x,y축에서 뒤에서 앞으로 3차원으로 보는 z축으로 처리하는 것
즉, 앞 쪽에 있는 요소와 뒤쪽에 있는 요소등 쌓임의 순서를 정하는 것임
grid라고 해서 달라지는 것은 없음, 겹치는 영역이 생길 때 조정 가능함
아래 예시와 같이 겹치게 될 때, z-index로 조정해서 위치를 변경할 수 있음
값이 클수록 위로 올라오게 됨, 그래서 요소를 나열하고 쌓임 순서를 생각해서 값을 배분하는게 좋음
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 1fr);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 24px;
    opacity: 0.7;
}

.item:nth-child(1) {
    grid-row: 1/ span 2;
    grid-column: 1 / span 2;
}

.item:nth-child(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 4;
    z-index: 1;
}

참고자료

Grid 단위 fr, min-content, max-content

fr의 경우, 가로 & 세로 길이를 비율을 사용해서 나눌 때 쓰는 단위임, 이 때 px과 혼합해서 쓸 수 있음
이는 px 단위만큼 가진 값 제외하고 나머지 길이의 비율을 가져가는 것임(다른 절대 길이와 혼합해서 사용하는 것이고 절대길이를 우선적으로 쓰고 남은 비율로)
예시

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: 100px 1fr 1fr;
}

min-content와 max-content의 경우, grid-template-rows, columns에 넣을 수 있음
내부의 내용에 대한 것은 맞는데 글씨 크기만큼 늘어남
이 때 min-content의 경우 가장 긴 단어를 기준으로 쪼개져 있게 됨(예시처럼 길이가, 더 이상 줄어들지 못할 때까지 단어에 따라서)
예시

    <div class="container">
      <div class="item">
        Lorem ipsum,
        dolor sit amet
        consectetur adipisicing
      </div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: min-content 1fr 1fr;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
}

max-content의 경우 단어를 한 줄에서 자르지 않는 선까지 모든 길이를 차지함

.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: max-content 1fr 1fr;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
}

둘 다, 내부의 내용에 따라서 유동적으로 길이를 변경할 때 사용함
참고자료
참고자료

Grid 단위 auto-fill, auto-fit

남는 공간이 생길 때 알아서 채워졌으면 하는게 auto-fill임 그러면 늘어난만큼 만약 column기준이라면 그만큼 남는 공간에 채워지게됨
column의 개수를 유연하게 처리할 수 있음 rows의 경우도 마찬가지(알아서 공간을 채우게끔)
이 때 그럼에도 남는 공간이 생기면 minmax(min, max)를 통해 가장 작아질 수 있는 최소의 크기와 또 최대의 크기를 정할 수 있음
그러면 가장 작아질 때 크기값과 큰 경우 크기값을 미리 지정함(예시처럼, 그러면 자동으로 column을 채우면서도 빈 공간도 채워짐)
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(100px,1fr));
    grid-auto-rows: 50px;
}   

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
}

auto-fit의 경우, 빈 자리가 생길 수 밖에 없는 개수가 적을 때 혹은 행렬이 그런 경우가 있음
그럴 때 남는 공간을 아이템이 알아서 꽉 채우게 됨
예시

    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
    </div>

.container {
    border: 5px dashed orange;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
    grid-auto-rows: 50px;
}   

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
}

기본적으로 유동적으로 row - column을 조정하는 것인데 그 방식이 다른 것임

gang_shik

측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다

Grid

CSS

Grid 개요

Container display

Container grid-template-rows, grid-template-columns

Container grid-template-areas

Container row-gap, column-gap, gap

Container grid-auto-rows, grid-auto-columns

Container grid-auto-flow

Container grid(shorthand)

Container justify-content, align-content

Container justify-items, align-items

Item grid-row, grid-column

Item grid-area

Item order

Item z-index

Grid 단위 fr, min-content, max-content

Grid 단위 auto-fill, auto-fit

Flex Box

반응형 디자인

0개의 댓글