Grid Garden - CSS grid 속성 배우기 게임 (cssgridgarden.com)
Grid Garden
A game for learning CSS grid layout
cssgridgarden.com
문제 : 1 이랑 4 사이 칸두기 어려움 >> grid 사용
.father {
display:flex;
flex-wrap: wrap;
justify-content: space-between;
}
.child{
flex-basis: 30%;
background: peru;
color: white;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
}
0. display: grid; , fater에 사용함
1. grid-template-columns : 20px 55px 89px 100px;
grid-template-columns: repeat(3, 33%); 각각 33%의 동일한 너비를 가진 3개의 열을 생성합니다.
grid-template-rows: 110px 45% 35%;
2. column-gap + row-gap = grid-gap = gap
3. grid-template-areas
cotent(aqua) >> grid-row: 2 / span 2;
or
content, nav 둘다에 grid-row: span 2;
4. repeat
grid-template-columns: repeat(4, 200px); == 200px 200px 200px 200px
grid-template-rows: 100px repeat(2, 200px) 100px;
5. grid columns start, end
>> grid columns start at line no.1 ~ end at line no.3
= grid-column: 1/3;
grid-columns: span 4; >> 시작부터 끝까지임
6. grid row start, end
1 / 5 = 1 / -1
7. line name 넣기
7.1
.grid {grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px;}
.content{
grid-column : first-line / fourth-line <<<< (1 / -1)
}
7.2 repeat 안에 이름넣기 ::
.grid {grid-templeate-row : repeat(4, 100px [sexy-line]);}
.content{
grid-row: sexy-line 1 / sexy-line:3 ;
}
8. fr (fraction 부분 %)
.grid{
grid-template-columns: repeat(4, 100px); >>> (4, 1fr); } (== 1fr 1fr 1fr 1fr) >>> 가질수 있는만큼의 너비내에서
>> 해당 콘테이너의 너비, 높이 정해둬야함
height: 50vh; == 화면의 절반
>> width 가 500px 이면 그 내에서 가짐 (grid 콘테이너의 width)
1fr 2fr == 1 : 2 인거
grid-template:
>>>> [line name] "row row row row" height [line name] / width <<<<
[header-start] "header header header header" 1fr [header-end]
[content-start] "content content content nav" 2fr [content-end]
[footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr
;
line name은 싹다 넣거나 다 안넣거나 해야함
grid-template 에선 repeat 사용못함
9. justify-items
justify-items : 기본 stretch >> grid를 꽉 채우도록 함 >> 수평적으로
align-itmes: 수직으로
안에 내용물이 있어야 보임(아니면 각각에 ehgith, width가 있던지)
10. place-items: y(align-items) / x(justify-items); >> 두개합친거
11. justify-content, align-content >> 전체 grid에 관함 >> 두개합친거 = place-content
~~ items >> 각개 item들에 관함
12. align-self, justify-self >> item 하나하나에 관함 >> 합친거 : place-self
## .items*20>{$} >> html 자동완성!
13. grid-auto-rows / grid-auto-columns / grid-auto-flow
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px); >> 이 줄 없어도 됨
grid-auto-rows: 100px;
grid-auto-flow : column; >> 원래 밑으로 자동증가(: row 가 default)되던 grid가 컬럼방향으로(우측으로 ) 늘어남
14. minmax /min-content/ max-content
minmax : element 최대, 최소크기 지정
>> 화면이 작아져도 너무안줄게
grid-template-columns: repeat(10, minmax(100px, 1fr));
>>> 크기는 유지되고 스크롤바가 생김
15. auto-fit / auto-fill
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
auto-fill : row를 empty column으로 채움
auto-fit : 화면가득 채움
16. min-content / max-content
>> grid-template-columns: max-content min-content;
>> box가 content에 맞게 최대, 최소로 맞춰짐
- grid-template-columns: repeat(5, minmax(max-content, 1fr)); >>
- grid-template-columns: repeat(auto-fill, minmax(20px, max-content)); >>
코코아톡 필기1 (0) | 2022.07.05 |
---|---|
CSS Layout (4) project_clone coding 필기 (0) | 2022.06.29 |
CSS Layout (3) scss (0) | 2022.06.25 |
CSS Layout 필기 (1) flex (0) | 2022.06.16 |
바닐라 필기(1) 1~4 (0) | 2022.06.15 |
댓글 영역