상세 컨텐츠

본문 제목

CSS Layout 필기(2) grid

본문

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

 

Grid Garden

A game for learning CSS grid layout

cssgridgarden.com

  •  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)); >>

 

'노마드 > 바닐라&csslayout & 코코아톡 & 그림앱' 카테고리의 다른 글

코코아톡 필기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

관련글 더보기

댓글 영역