`display: grid;`: 요소를 그리드 컨테이너로 설정합니다.
원하는 컨테이너에 "너 이제 그리드야"라고 지정해준다. (flexbox와 마찬가지로.) 부모 컨테이너 안에 있는 각각의 자식 요소들은 다 grid cell로 변환된다. 그래서 개발자는 grid 따로, grid cell 따로 속성을 지정해줄 수 있다.
`grid-template-columns`: 가로로 몇 개를 넣을지, 사이즈는 얼마나 할 건지 지정
`grid-template-rows`: 세로로 몇 개를 넣을지, 사이즈는 얼마나 할 건지 지정
grid-template-columns: 100px 100px 100px;
가로로, 100px 만큼, 3개 나열
grid-template-rows: 100px 200px 100px;
세로로, 100-200-100px;
이렇게 계속 이어서 쓰는 건 귀찮고 에너지 낭비! 그래서 'repeat' 함수가 있음
작성법은 grid-templet-columns: repeat(반복횟수, 사이즈) - 이런 식으로 쓰면 된다.↓
↓ 사이즈와 repeat을 섞어 쓸 수 있다 ↓
반응형으로 만들기 위해서는
사용 가능 너비의 20%씩 나누겠다. 하면,
grid-template-column: repeat(5, 20%); - 이렇게 작성하면 됨.
그리고 % 대신 fr 을 이용할 수도 있는데,
grid-template-column: 1fr 2fr 1fr; - 이렇게 적으면, 1+2+1=4 이렇게 가로를 총 4칸으로 나눈 다음 숫자만큼의 비율을 가지도록 할 수 있다. ↓
많이 쓰일 것 같네.. 굿.
크기를 똑같이 '등분'하려면
grid-template-columns: repeat(나눌칸수, 1fr) - 이렇게 적으면 됨.
가로 갯수가 몇 개인지에 따라서, 세로가 몇 개 생길지는 잘 모르겠지만,
생성되는대로 표시는 자도으로 하고 싶다면, ↓ - 이거는 auto 속성으로 처리할 수 있다.
`grid-auto-columns`: 그리드 아이템이 암시적으로 생성될 때 열 크기를 지정합니다.
`grid-auto-rows`: 그리드 아이템이 암시적으로 생성될 때 행 크기를 지정합니다.
그리고,
'auto' 를 쓰면, 텍스트 양에 따라 컨테이너가 자동으로 커지게 할 수 있다.
grid-auto-rows: minmax(150px, auto);
컨텐츠 내용이 늘어나면 자동으로 컨테이너 사이즈가 커지게 하되 (기본 사이즈는 150px로 한다는 의미)
Q. 왜 세로로만 배치되니?
쉼표를 찍어서 그렇지.. 뷰웅
`grid-column-gap`: 열 사이의 간격을 지정합니다.
`grid-row-gap`: 행 사이의 간격을 지정합니다.
`grid-gap`: `grid-row-gap`과 `grid-column-gap`을 한 번에 지정합니다.
전체적으로 gab을 주고 싶다면 padding을 쓰면 됨!
> 이거는 전체 바깥에 여유를 주는 것임.
공간 잡아먹기(?)
일단 grid line 개념을 알아야 함.
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.item2 {
grid-column-start: 2;
grid-column-end: 4;
}grid-column-start와 grid-colum-end를 합쳐서
grid-column: 2 / 4 > 이런 식으로 쓸 수도 있다.
또한 'span'을 이용해서 뒤로 몇 개까지 차지할 건지, 설정할 수 있다.
만약 grid-column: 2 / span3; 이렇게 작성하면 "2번째 칸 부터 시작해서 뒤로 3개의 칸을 차지한다"는 뜻이다.
예 ↓
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.item2 {
grid-column: 2 / span3;
}↑ 이렇게 작성하면 이렇게 나옴 ↓
맨 끝에까지 차지하고 싶으면
grid-column: 2 / -1; 이런 식으로 쓰면 된다. (2번째 칸에서 시작해서 마지막까지 다 차지한다는 뜻)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="basic-style.css" />
<link rel="stylesheet" href="grid.css" />
<title>CSS Gride Example</title>
</head>
<body>
<div class="container">
<div class="item color1">item1</div>
<div class="item item2 color2">item2</div>
<div class="item color3">item3</div>
<div class="item color4">item4</div>
<div class="item color5">item5</div>
<div class="item color1">item6</div>
<div class="item color2">item7</div>
<div class="item color3">item8</div>
<div class="item color4">item9</div>
<div class="item color5">item10</div>
</div>
</body>
</html>
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.item2 {
grid-column-start: 2;
grid-column-end: 4;
}dive class 두 번째 아이템에 'item2' 라고 쳐 넣고, CSS에서 .item2 라고 했을 뿐인데, 어떻게 적용이 되냐? 'item item2 color' 라고 이름 전체를 쓴 것도 아닌데?
chatGTP
CSS 선택자는 클래스 이름에 포함된 부분 문자열을 기반으로 요소를 선택할 수 있습니다. 따라서 .item2라는 클래스 선택자는 class 속성에 item2라는 부분 문자열이 포함된 모든 요소를 선택합니다.
HTML 코드에서 <div class="item item2 color2">item2</div>와 같이 클래스 속성 값에 item2라는 부분 문자열이 포함되어 있기 때문에, .item2라는 클래스 선택자는 이 요소를 선택하여 스타일을 적용합니다.
CSS 선택자는 정확한 클래스 이름과 일치하는 요소뿐만 아니라, 부분 문자열과 일치하는 요소도 선택할 수 있습니다. 이렇게 함으로써 더 다양한 요소들에 스타일을 적용할 수 있습니다.
grid-area 는 영상으로 복습하기
해당 부분 링크
'frontend > CSS' 카테고리의 다른 글
| CSS selector cheat sheet [선택자] (0) | 2023.07.27 |
|---|---|
| selector의 기본 종류 (0) | 2023.07.27 |
| class, id 선택 (0) | 2023.07.27 |
| CSS 그리드 속성 리스트 (0) | 2023.07.26 |
| [필기] CSS 기초 (10) - CSS의 꽃 flexbox 정복하기 (드림코딩) (0) | 2023.07.26 |
| [필기] CSS 기초 (9) - 반응웹을 위한 미디어쿼리 (0) | 2023.07.26 |
| [필기] CSS 기초 (6) - 반응웹을 위한 Transform & Transition (0) | 2023.07.26 |
| [필기] CSS 기초 (5) - 반응웹을 위한 가상 클래스 & 가상 요소 (0) | 2023.07.26 |