- 18일차 프론트엔드 공부 -
grid 레이아웃
flex
1차원적 구조
row 혹은 column 구조 택1
grid
2차원적 구조
row와 column 레이아웃 동시 설정 가능
grid 속성
1. 요소의 속성을 grid로 변경
display: grid
grid-container : grid가 적용된 요소
grid-item : grid가 적용된 요소의 자식 요소들
grid-line : grid-item 사이의 경계를 의미
grid-number : 해당 grid-line이 몇번째 line인지를 의미
2. grid-template-rows
grid의 행의 개수 및 크기를 지정할 수 있다
grid-template-rows: 1fr 2fr 200px
2. grid-template-columns
grid의 열의 개수 및 크기를 지정할 수 있다
grid-template-columns: 1fr 2fr 200px
fr
fraction(분수)의 약자, grid-template에서 사용할 수 있는 비율 단위
ex)
grid-template-columns: 1fr 2fr 2fr 1fr
repeat(a, b)
grid-template에서 사용할 수 있는 반복 함수
b 규격의 grid-template을 a개 생성한다.
grid-template-columns: repeat(4, 1fr)
grid-template-columns: repeat(4, 1fr) = grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: repeat(2, 1fr 200px) = grid-template-columns: 1fr 200px 1fr 200px
grid-template-rows: 2fr repeat(2, 1fr 200px) = grid-template-columns: 2fr 1fr 200px 1fr 200px
ex)
grid-template-columns: 200px repeat(3, 1fr)
grid-template-rows: 1fr 2fr
grid 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="item item1">
item1
</div>
<div class="item item2">
item2
</div>
<div class="item item3">
item3
</div>
<div class="item item4">
item4
</div>
<div class="item item5">
item5
</div>
<div class="item item6">
item6
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.container {
border: 2px solid red;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(4, 100px);
grid-gap: 5px;
}
.item {
border: 2px solid blue;
}
grid-gap 각각의 grid 아이템 사이에 빈칸을 줌
주의사항 : 인터넷 익스플로어는 지원하지 않는다.
grid-column / grid-row
grid-item이 얼마만큼의 영역을 차지할 지 정의한다.
grid-column: 1/3
grid-column은 grid-line의 번호, grid-row는 grid-number의 번호를 기준으로 영역을 할당한다.
ex)
grid-column: 1 / 3;
grid-row: 2 / 3;
grid 실습2
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="item item1">
item1
</div>
<div class="item item2">
item2
</div>
<div class="item item3">
item3
</div>
<div class="item item4">
item4
</div>
<div class="item item5">
item5
</div>
<div class="item item6">
item6
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.container {
border: 2px solid red;
display: grid;
grid-template-columns: repeat(2, 1fr 2fr);
grid-template-rows: repeat(4, 100px);
grid-gap: 5px;
}
.item {
border: 2px solid blue;
}
.item1 {
grid-column: 1 / 3;
grid-row: 2 / 3;
background: green;
}
Flex와 Grid의 차이점
Flex
- 비교적 작은 단위의 레이아웃 구성에 적합
- 작업 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합
Grid
- 큰 규모의 레이아웃 구성에 적합
- 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있음
단, 그리드는 상대적으로 최신 기술이기에 모든 브라우저를 지원하지 않는다.
https://caniuse.com/ 위 사이트를 통해 그리드가 사용 가능한 브라우저를 확인할 수 있다.
참고사항: 빈칸에 display: grid를 입력하면 그리드를 사용가능한 브라우저
display: flex을 입력하면 flex를 사용가능한 브라우저를 확인 가능하다.
'프론트엔드 공부 > CSS 기초' 카테고리의 다른 글
| 19일차 프론트엔드 공부 - 반응형 웹 (0) | 2024.09.24 |
|---|---|
| 17일차 프론트엔드 공부 - animation (0) | 2024.09.22 |
| 16일차 프론트엔드 공부 - transform (0) | 2024.09.21 |
| 15일차 프론트엔드 공부 - 함수, position, transition (0) | 2024.09.19 |
| 14일차 프론트엔드 공부 - 폰트, 단위 (0) | 2024.09.12 |