CSS Layout 필기(2) grid

Grid Garden - CSS grid 속성 배우기 게임 (cssgridgarden.com)

Grid Garden

•  grid-template-columns
•  grid-template-rows
•  column-gap
•  row-gap
•  gap
•  grid-template-areas
•  grid-column-start
•  grid-column-end
•  grid-row-start
•  grid-row-end
•  grid-column
•  grid-row
•  grid-template
•  justify-items
•  align-items
•  place-items
•  justify-content
•  align-content
•  place-content
•  justify-self
•  align-self
•  place-self
•  grid-auto-rows
•  grid-auto-flow
•  grid-auto-columns

Keywords & Functions:

•  repeat
•  fr
•  minmax
•  auto-fit
•  auto-fill
•  min-content
•  max-content

문제 : 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%;

grid-template-columns: 250px 250px 250px; column-gap: 10px

2. column-gap + row-gap = grid-gap = gap

grid-template-columns: 250px 250px 250px; grid-template-rows: 100px 50px 300px;gap: 10px;

3. grid-template-areas

같은 방법임 (gap만 다름)

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;

• auto도 있음

 

5.  grid columns  start, end

.header{ background-color: chartreuse; grid-column-start: 1; grid-column-end: 3; }

>> 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: 수직으로 

align-itmes: center;

안에 내용물이 있어야 보임(아니면 각각에 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)); >>