[CSS] 그리드(Grid)

CSS/CSS

[CSS] 그리드(Grid)

ui-o 2025. 6. 25. 15:58

Grid

행(row)과 열(column)을 동시에 다루는 2차원 레이아웃 시스템
콘텐츠를 행과 열에 배치할 수 있으며 float나 flexbox보다 레이아웃 구조를 직관적이고 정밀하게 만들 수 있음

특징

부모 요소(그리드 컨테이너) 안에서 자식 요소(그리드 아이템)의 위치와 크기를 행·열 기준으로 지정 가능
격자(grid) 형태의 셀(cell) 기반 배치
수평·수직 정렬 모두 자유로움
레이아웃을 HTML 구조 변경 없이도 CSS만으로 재배치 가능

Grid vs Flex

항목	Grid	Flex
레이아웃 방향	2차원 (행 + 열 동시 제어)	1차원 (행 또는 열 중 하나만 제어)
주 사용 목적	- 전체 페이지 - 대규모 레이아웃 설계	- 작은 단위의 UI 정렬 - 한 줄 배치
배치 기준	부모에서 행·열 구조를 먼저 정의 후 배치	자식 요소 콘텐츠 크기나 순서에 따라 배치
정렬 특징	수평·수직 동시 정렬 가능	수평 또는 수직 중 한 방향 정렬
크기 조절 방식	fr, minmax() 등 전용 단위로 공간 분배	flex-grow, flex-shrink, flex-basis로 크기 조절
재배치	HTML 구조 변경 없이 CSS만으로 재배치 용이	순서 변경 가능하지만 2차원 전환은 어려움
장점	- 행·열 동시 제어 - 정밀한 레이아웃 - 반응형에 유리	- 단일 방향에 최적화 - 코드 간단 - 호환성 높음
단점	- 단순 구조에 쓰면 복잡해짐 - 일부 구형 브라우저 제한	- 2차원 제어 어려움 - 큰 레이아웃 설계에 부적합
적합한 상황	- 페이지 전체 틀 - 대시보드 - 갤러리 - 카드 레이아웃	- 버튼 그룹 - 메뉴바 - 태그 리스트 - 단일 행/열 배치

/* Flexbox: 한 방향만 */
.flex-container {
  display: flex;
}

/* Grid: 행+열 동시 설정 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 */
  grid-template-rows: 100px 200px; /* 2행 */
}

Grid의 공통 속성, 함수

1. px

절대 단위
화면의 실제 픽셀 수를 의미함
고정 크기 지정할 때 사용
활용 예) 버튼, 아이콘 등 정확한 크기 지정

 grid-template-columns: 100px 200px; → 첫 번째 열은 100픽셀, 두 번째 열은 200픽셀 고정 크기

2. % (퍼센트)

상대 단위
부모 요소(그리드 컨테이너)의 너비 또는 높이를 기준으로 백분율 크기 지정
활용 예) 레이아웃 내 비율 조정

grid-template-columns: 30% 70%; → 첫 번째 열은 컨테이너 너비의 30%, 두 번째 열은 70%

3. fr (Fraction 단위)

Grid 전용 단위
고정 크기(px, %, minmax 등) 등을 제외한 나머지 공간을 비율로 분배
다른 단위로 혼합하여 사용 가능
- 고정값과 혼합 사용하는 경우 : 고정값 먼저 빼고 남은 공간을 fr 비율로 나눠서 각각 할당
활용 예) 반응형 3열 균등 분배
특징
- fr 단위끼리는 비율대로 공간 분배
- 고정 크기(px, %)가 있으면 그 크기를 뺀 나머지 공간만 분배 대상
- fr 단위는 반응형 레이아웃에 매우 유용

grid-template-columns: 20px 1fr 2fr;

/* 예를 들어 컨테이너 너비가 620px이라고 가정하면,
1. 전체 컨테이너 너비에서 고정 크기(픽셀)를 뺌
  -  20px 고정 열을 제외한 공간 = 620px - 20px = 600px
  
 2. 나머지 공간 600px을 fr 단위 비율로 나눕니다.
  - 1fr과 2fr은 총 3fr (1 + 2)
  - 1fr = 600px × (1/3) = 200px
  - 2fr = 600px × (2/3) = 400px

*/

4. auto

크기를 컨텐츠 크기에 맞춰 자동 조절
다른 트랙과 혼합해 쓰기 좋음
활용 예) 텍스트 크기에 따라 자동 높이 조절

예: grid-template-rows: auto 100px; → 첫 번째 행은 컨텐츠 높이에 따라 크기 결정, 두 번째 행은 100px 고정

5. minmax(min, max)

최소(min)와 최대(max) 크기를 지정하는 함수
여러 단위 혼하하여 사용 가능
특징
- 반응형에서 유용, 너무 작거나 크지 않게 제한 가능
- 최소와 최대를 다르게 조절해서 유동적 크기 제어 가능

속성값	설명
n	-고정값, 상대값 지정
min-content	- 그리드 아이템 중 최소 콘텐츠 길이
max-content	- 그리드 아이템 중 최대 콘텐츠 길이
auto

grid-template-columns: minmax(max-content, 10px) 1fr 1fr;

Grid Container (부모에 적용하는 속성)

display: grid 또는 display: inline-grid가 적용된 부모 요소
display: grid로 그리드 컨테이너를 생성하여, 2차원 Grid Layout 환경으로 전환한 뒤, 내부의 자식 요소(Grid Item)를 행과 열 기준으로 배치하고 제어
레이아웃의 큰 틀(행·열 구조, 간격, 자동 배치 방식 등)을 결정

display: grid; /* 또는 inline-grid */
grid-template-columns;
grid-template-rows;
grid-template-areas;
grid-auto-columns;
grid-auto-rows;
grid-auto-flow;
justify-items;
align-items;
place-items;
justify-content;
align-content;
place-content;
gap; /* row-gap, column-gap */

grid 활성화

/* grid 속성을 사용하기 위한 초기화 단계 */
display: grid

속성값	설명
grid	- 블록(block) 레벨 그리드 컨테이너 생성 - 기본적으로 한 줄 전체 차지 - 레이아웃 요소로 주로 사용됨
inline-grid	- 인라인(inline) 레벨 그리드 컨테이너 생성 - 컨텐츠 크기만큼만 차지 - 텍스트 흐름 속에서 그리드를 쓰고 싶을 때 사용

트랙(Track)

트랙(track) = 그리드의 한 줄 (행 하나 또는 열 하나)
grid-template-columns → 열(컬럼) 트랙 정의, grid-template-rows → 행(로우) 트랙 정의
트랙의 크기를 px, %, fr, minmax() 등 다양한 단위로 지정 가능
fr 단위는 남은 공간을 비율로 나눠 차지하므로 반응형에서 자주 사용

1. grid-template-columns

자식 요소의 열(column) 크기와 개수를 정의
원하는 열의 개수와 너비를 설정
너비 단위 : px, %, fr 등 고정값, 상대값으로 지정 가능하며, 혼합하여 사용 가능
40% 60% == 4fr 6fr
1fr 1fr 1fr 1fr == repeat(4, 1fr) 함수로 사용 가능

<style>
	.layout {
		display: grid;
		grid-template-columns: 200px 100px 50px
	}

	.layout>div {
		border: 2px solid #ddd
	}
</style>
<div class="layout">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

2. grid-template-rows

자식 요소의 행(row)의 크기를 조정
값: grid-template-columns와 동일한 단위와 함수 사용 가능

grid-template-rows: 50px auto 100px;
/* 3개의 행을 만듭니다. 첫 행은 50px, 두 번째는 컨텐츠 높이만큼, 세 번째는 100px */

grid-template-areas

그리드 레이아웃 내 영역(Area)을 이름으로 정의하는 속성.
영역 이름을 문자열 형태로 행(Row) 단위로 지정해서, 각 영역이 차지할 행과 열의 위치를 시각적으로 쉽게 표현 가능
HTML 구조를 변경하지 않고도 CSS 만으로 레이아웃 배치가 가능
영역 이름이 겹치거나 불일치하면 레이아웃이 깨질 수 있으니 주의
grid-template의 이름은 각 아이템의 grid-area 이름과 반드시 일치해야 영역 병합과 위치 지정이 작동
- grid-template-areas는 그리드 영역 이름(레이아웃 설계도)
- grid-area는 각 아이템이 어느 영역에 들어갈지 지정하는 표식

기본 문법

큰따옴표(" ") 안에 한 줄(row)에서 각 셀(cell)의 영역 이름을 나열
공백으로 구분하며, 영역 이름이 같으면 해당 셀들이 병합되어 하나의 영역이 됨
각 행은 따옴표로 구분해 여러 줄을 정의
. (점)은 빈 공간, 즉 영역이 없는 셀을 의미

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

영역 이름 규칙

영역 이름은 영문자, 숫자, 밑줄(_) 사용 가능
공백이나 특수문자는 사용하지 않는 게 좋음
영역 이름을 지정하지 않은 셀은 ".(점)"으로 표시하여 빈칸으로 둠

예제

<!-- HTML -->
<style>
    .container {
        display: grid;
        grid-template-columns: 150px 1fr;
        grid-template-rows: 60px 1fr 40px;
        grid-template-areas:
            "header header"
            "sidebar main"
            "footer footer";
        gap: 10px;
        height: 300px;
        border: 1px solid #333;
    }

    header {
        grid-area: header;
        background-color: #8ecae6;
        padding: 10px;
    }

    .sidebar {
        grid-area: sidebar;
        background-color: #219ebc;
        padding: 10px;
    }

    main {
        grid-area: main;
        background-color: #023047;
        color: white;
        padding: 10px;
    }

    footer {
        grid-area: footer;
        background-color: #ffb703;
        padding: 10px;
        text-align: center;
    }
</style>


<!-- HTML -->
<div class="container">
    <header>헤더 영역</header>
    <aside class="sidebar">사이드바 영역</aside>
    <main>메인 콘텐츠</main>
    <footer>푸터 영역</footer>
</div>

grid-auto-rows

그리드 컨테이너에 명시적으로 정의되지 않은(암묵적으로 생성된) 행(row)의 높이를 지정하는 속성
grid-template-rows로 행의 높이가 지정되지 않은 속성의 높이를 설정
"몇 개의 행(row)을 미리 정하지 않았는데, 나중에 그 행이 생기면 그 행 높이는 얼마로 할건지”를 정하는 속성
grid-template-rows를 지정하지 않고 grid-auto-rows만 지정하면, 모든행의 높이가 동일하게 적용

속성값	설명
grid-auto-rows : n	- 아이템의 높이를 n값으로 설정 - 콘텐츠의 내용이 길어져도 item의 높이가 늘어나지 않음
grid-auto-rows : auto (기본값)	- 콘텐츠의 높이에 맞춰 자동으로 조절
grid-auto-rows: minmax(n, auto)	- 정해진 높이를 사용하되, 콘텐츠의 내용에 따라 행의 높이를 자동으로 조절할 때 사용가능
grid-auto-rows: minmax(n, n)	- 최소값과 최대값의 높이 설정 가능

.container {
  display: grid;
  grid-template-rows: 100px 100px;  /* 명시적 행 2개 */
  grid-auto-rows: 50px;             /* 그 이후 행 높이 50px */
}

/*
 grid-template-rows를 지정하지 않고 grid-auto-rows만 지정하면, 모든행의 높이가 동일하게 적용
 
*/
.container {
  display: grid;
  grid-auto-rows: 100px; /* 모든 행 높이 100px로 동일하게 설정 */
}

grid-auto-columns

그리드 컨테이너에 명시적으로 정의되지 않은(암묵적으로 생성된) 열(column)의 너비를 지정하는 속성
grid-template-columns로 열의 너비가 지정되지 않은 속성의 너비를 설정
"몇 개의 열(column)을 미리 정하지 않았는데, 나중에 그 열이 생기면 그 열 너비는 얼마로 할건지”를 정하는 속성
grid-template-columns를 지정하지 않고 grid-auto-column만 지정하면, 모든열의 너비가 동일하게 적용

속성값	설명
grid-auto-columns: n	- 아이템의 너비를 n값으로 설정 - 콘텐츠의 내용이 길어져도 item의 너비가 늘어나지 않음
grid-auto-columns: auto (기본값)	- 콘텐츠의 너비에 맞춰 자동으로 조절
grid-auto-columns : minmax(n, auto)	- 정해진 너비를 사용하되, 콘텐츠의 내용에 따라 열의 너비를 자동으로 조절할 때 사용가능
grid-auto-columns : minmax(n, n)	- 최소값과 최대값의 너비 설정 가능

.container {
  display: grid;
  grid-template-columns: 100px 100px;  /* 명시적 열 2개 */
  grid-auto-columns: 150px;             /* 그 이후 열 너비 150px */
}

/*
 grid-template-columns를 지정하지 않고 
  grid-auto-columns만 지정하면, 모든열의 너비가 동일하게 적용
 
*/
.container {
  display: grid;
  grid-auto-columns: 100px; /* 모든 열 너비 100px로 동일하게 설정 */
}

grid-auto-flow

자동으로 생성되는 그리드 아이템의 배치 방향과 순서를 결정하는 속성
즉, grid-template-rows나 grid-template-columns로 정의하지 않은 영역에 아이템이 들어갈 때
어떤 방식으로 행과 열에 배치할지를 정함

속성값	의미	설명
row (기본값)	행 우선 배치	아이템을 먼저 가로 방향으로 채우고, 공간이 부족하면 아래 행으로 넘어감
column	열 우선 배치	아이템을 먼저 세로 방향으로 채우고, 공간이 부족하면 오른쪽 열로 넘어감
dense	조밀하게 채움	빈 공간이 남으면 그 공간을 최대한 채움, 순서 무시 - 작은 아이템이 뒤늦게 나오더라도, 이전에 생긴 빈 공간을 최대한 메우도록 배치 - 이 때문에 아이템이 실제 HTML 순서와다르게 배치될 수있음 즉, 큰 아이템이 남긴 구멍을 작은 아이템이 먼저 채우게 되는 방식 * 생략 시 (기본값): “sparse” 알고리즘이 적용 - 아이템은 항상 순서대로 앞으로만 배치되며, 이전에 생긴 빈 공간을 채우지 않음 - 모든 자동 배치 아이템이 순서대로 나오지만, 나중에 작은 아이템이 왔을 때 채워질 수 있는 빈 공간은 그대로 남음
row dense	행 우선 + 조밀하게	row 배치 방식 + 빈 공간 최대 활용
column dense	열 우선 + 조밀하게	column 배치 방식 + 빈 공간 최대 활용

동작

grid-auto-flow - CSS | MDN

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

developer.mozilla.org

기본 (row)

<style>
.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 50px;
  grid-auto-flow: row; /* 기본값 */
}
</style>

<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>

column

<style>
    .container {
        display: grid;
        grid-template-rows: repeat(2, 80px);
        grid-auto-columns: 100px;
        grid-auto-flow: column; /* 세로 우선 */
        gap: 10px;
        border: 2px solid #333;
    }
</style>

<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>

justify-items

그리드 아이템을 가로(수평) 방향으로 정렬하는 속성
전체 컨테이너에서 아이템 위치를 조정하는 것이 아니라, 각 그리드 셀 내부에서 아이템의 가로 정렬 방식 지정
각 그리드 아이템에 별도로 justify-self를 적용하면 개별 아이템 정렬 가능

속성값	설명
start	아이템을 셀 왼쪽에 정렬 (LTR 기준)
end	아이템을 셀 오른쪽에 정렬
center	아이템을 셀 가운데로 정렬
stretch(기본)	아이템을 셀 너비 전체에 맞춰 늘림 (width가 auto일 경우)

aligh-items

그리드 아이템을 세로(수직) 방향으로 정렬하는 속성
전체 컨테이너에서 아이템 위치를 조정하는 것이 아니라, 각 그리드 셀 내부에서 아이템의 세로 정렬 방식 지정
각 그리드 아이템에 별도로 align-self를 적용하면 개별 아이템 정렬 가능

속성값	설명
start	아이템을 셀 위쪽에 정렬
end	아이템을 셀 아래쪽에 정렬
center	아이템을 셀 수직 중앙에 정렬
stretch(기본)	아이템을 셀 높이에 맞춰 늘림 (height가 auto일 경우)

place-items

align-items + justify-items를 한 번에 설정할 수 있는 단축 속성
그리드 셀 내부에서 아이템의 가로(수평)와 세로(수직) 정렬을 동시에 지정 가능
하나의 값만 쓰면 → 두 방향 모두 동일하게 적용

/* [문법] */
place-items: <align-items> <justify-items>;

justify-content

그리드 컨테이너 안에서 전체 그리드(트랙 전체)를 가로(수평) 방향으로 정렬하는 속성
즉, 그리드 셀들이 컨테이너 안에서 어떻게 배치될지를 결정
주의: 각 셀 안에서 아이템 위치를 조정하는 justify-items와는 다르게, 그리드 전체 블록 단위의 정렬.

속성값	설명
start	전체 그리드를 컨테이너 왼쪽에 붙임
end	전체 그리드를 컨테이너 오른쪽에 붙임
center	전체 그리드를 컨테이너 가로 중앙에 정렬
stretch(기본)	컨테이너 너비에 맞춰 전체 그리드 늘림 * 컬럼 너비가 정해져 있을 경우 늘어나지 않을 수 있음
space-between	첫 번째 행과 마지막 행은 컨테이너 끝에, 나머지는 균등 간격
space-around	행 사이와 양 끝 여백이 균등
space-evenly	행 사이와 양 끝 여백이 모두 동일

grid-template-columns: repeat(3, minmax(30px, auto));

align-content

그리드 컨테이너 안에서 전체 그리드(트랙 전체)를 세로(수직) 방향으로 정렬하는 속성
즉, 그리드 행들이 컨테이너 안에서 어떻게 배치될지를 결정
주의: 각 셀 안에서 아이템 위치를 조정하는 align-items와는 다르게, 그리드 전체 블록 단위의 수직 정렬
컨테이너 높이가 그리드 전체 높이보다 클 때만 차이가 나타남

속성값	설명
start	전체 그리드를 컨테이너 위쪽에 붙임
end	전체 그리드를 컨테이너 아래쪽에 붙임
center	전체 그리드를 컨테이너 세로 중앙에 정렬
stretch(기본)	컨테이너 높이에 맞춰 전체 그리드 늘림 * 행 높이가 정해져 있을 경우 늘어나지 않을 수 있음
space-between	첫 번째 행과 마지막 행은 컨테이너 끝에, 나머지는 균등 간격
space-around	행 사이와 양 끝 여백이 균등
space-evenly	행 사이와 양 끝 여백이 모두 동일

place-content

align-content + justify-content를 한 번에 설정할 수 있는 단축 속성
그리드 전체 블록을 컨테이너 안에서 가로(수평)와 세로(수직) 방향으로 동시에 정렬 가능
전체 그리드 블록(트랙 전체)이 컨테이너보다 작을 때만 효과가 나타남
하나의 값만 지정하면 → 모두 동일하게 적용

/* [문법] */
place-content: <align-content> <justify-content>;

gap, row-gap, column-gap

그리드 셀 사이의 간격(공백, 여백)을 지정하는 속성
Flexbox에서도 사용가능
단위 : px, em, rem, %, fr 등 CSS에서 사용할 수 있는 단위 모두 사용 가능
셀 사이 간격만 조정, 컨테이너 패딩/마진과는 별개
gap은 “아이템 사이”만. 바깥 여백은 여전히 padding/margin으로 관리

속성명	설명
gap	그리드 아이템 사이의 가로, 세로 간격을 한꺼번에 지정
row-gap	그리드 아이템 사이의 행 사이 간격 지정
column-gap	그리드 아이템 사이의 열 사이 간격 지정

/* 한 값만 지정 */
gap: 20px; 
/* → 행(row)과 열(column) 모두 20px 간격 */

/* 두 값 지정 */
gap: 10px 30px; 
/* → 첫 번째 값: row-gap (행 간격) 
   두 번째 값: column-gap (열 간격) */

[CSS] Grid와 Flex에서의 gap

gap정의 : Grid나 Flexbox 컨테이너 안에서 자식 요소들 사이의 간격을 지정하는 CSS 속성행(Row)과 열(Column) 사이 간격을 동시에 또는 개별적으로 조절할 수 있음gap의 외곽 여백은 padding이 담당flex의 ga

u-pub.tistory.com

Grid item (자식에 적용하는 속성)

그리드 컨테이너의 자식 요소
각 아이템은 셀 단위로 배치되며, grid-column, grid-row 속성으로 개별 위치와 크기를 지정 가능

grid-column

그리드 열의 크기와 위치를 지정
값은 숫자(라인 번호), span 키워드, auto, 음수 값(-1 = 끝 선) 등을 사용할 수 있음
grid-column은 grid-column-start + grid-column-end의 단축형 속성으로 개별로 속성값 설정 가능
각 위치는 개발자 도구에서 해당 소스의 grid 버튼을 클릭하여 숫자를 쉽게 파악할 수 있음.

 /* [문법] */
grid-column: <start-line> / <end-line>;

grid-column-start: <start-line>;

grid-column-end: <end-line>;

start-line → 시작할 세로 그리드 라인 번호
end-line → 끝낼 세로 그리드 라인 번호 (해당 선 직전까지 포함됨)

속성값 종류

작성 방식	설명	예시
선 번호 지정	시작 라인과 끝 라인을 숫자로 지정	grid-column: 1 / 3; 1번 선부터 3번 선 전까지 → 2칸 차지
span 키워드	현재 위치 기준으로 몇 행을 차지할지	grid-column: span 2; 현재 위치 기준 오른쪽으로 2칸 차지
전체 영역 차지	시작부터 끝까지 전체 차지	grid-column: 1 / -1; 시작~마지막 선까지 전체 폭 차지
자동 배치	자동으로 배치, 기본값	grid-column: auto; 기본값, 자동으로 배치됨
단축형 조합	시작 라인 번호 + span	grid-column: 2 / span 3; 2번 선부터 시작해서 오른쪽으로 3칸 차지

grid-row

그리드 행의 크기와 위치를 지정
값은 숫자(라인 번호), span 키워드, auto, 음수 값(-1 = 끝 선) 등을 사용할 수 있음
grid-row은 grid-row-start + grid-row-end의 단축형 속성으로 개별로 속성값 설정 가능
각 위치는 개발자 도구에서 해당 소스의 grid 버튼을 클릭하여 숫자를 쉽게 파악할 수 있음.
grid-column과 동일

 /* [문법] */
grid-row: <start-line> / <end-line>;

grid-row-start: <start-line>;

grid-row-end: <end-line>;

start-line → 시작할 가로 그리드 라인 번호
end-line → 끝낼 가로 그리드 라인 번호 (해당 선 직전까지 포함됨)

속성값 종류

작성 방식	설명	예시
선 번호 지정(Line number)	시작 라인과 끝 라인을 숫자로 지정	grid-row: 1 / 3; 1번 라인부터 3번 라인 전까지 (2행 차지)
span 키워드	현재 위치 기준으로 몇 행을 차지할지	grid-row: span 2; 아래쪽으로 2행 차지
전체 영역 차지	시작부터 끝까지 전체 차지	grid-row: 1 / -1; 위에서 아래 끝까지
자동 배치	자동으로 배치, 기본값	grid-row: auto;
단축형 조합	시작 라인 번호 + span	grid-row: 2 / span 3; 2번 라인에서 시작, 3행 차지

justify-self

그리드 아이템을 셀의 가로축(인라인 축) 에서 정렬하는 속성

값	설명
start	아이템을 셀의 왼쪽(시작점)에 정렬
end	아이템을 셀의 오른쪽(끝점)에 정렬
center	아이템을 셀의 중앙에 정렬
stretch (기본값)	아이템이 셀의 가로 공간을 꽉 채우도록 늘어남

align-self

그리드 아이템 하나의 세로축(블록 축) 정렬을 제어하는 속성

값	설명
start	아이템을 셀의 위쪽으로 정렬
end	아이템을 셀의 아래쪽으로 정렬
center	아이템을 셀의 세로 가운데로 정렬
stretch (기본값)	아이템이 셀의 세로 공간을 가득 채움

저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS' 카테고리의 다른 글

[CSS] transition (0)	2025.06.27
[CSS] transform - scale, rotate, skew, tranlate (0)	2025.06.25
[CSS] CSS 상속 및 초기화 (0)	2025.06.18
[CSS] Flex (0)	2025.06.17
[CSS] font-size (0)	2025.06.13

현재글[CSS] 그리드(Grid)

자바스크립트 배열, 유용현 표현, 비즈니스영어회화, 반응형 퍼블리싱, 리액트, JavaScript, 자바스크립트 객체, html, 스피킹, 영어, 일상표현, 유용한표현, 반응형 웹, css, 자바스크립트, React, 유용한 표현, javascript 객체, 영어회화, 퍼블리싱,

Today :
Yesterday :

-