코딩

노마드코더 CSS Layout 마스터클래스 챌린지 - 4일차

조강철10 2024. 3. 7. 17:37
반응형

 

 

1. Auto Columns and Rows

 

미리 정해둔 그리드의 수보다 많은 양의 컨텐츠가 추가될 때

grid-auto 를 사용하여 그리드를 자동으로 추가할 수 있다.

 

.father{
  display: grid;
  gap: 10px;
  min-height: 50vh;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

 

가로 2개, 세로 2개의 그리드를 생성해 두었지만

더 많은 양의 내용이 추가되었을 때

grid-auto-rows : 1fr 크기의 새로운 행을 추가한다.

grid-auto-columns : 1fr 크기의 새로운 열을 추가한다.

 

grid-auto-flow : 자동으로 생성되는 그리드의 방향을 정한다. 기본값 row.

 

 

2. Align and Justify Items

 

.father{
  display: grid;
  gap: 10px;
  min-height: 50vh;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  place-items: start end;
}

 

place-items : 그리드 내 컨텐츠를 어디에 위치 시킬지 설정.

start end > 열의 start 지점, 행의 end 지점에 놓음.

 

 

.child:nth-child(6){
  background-color: teal;
  align-self: center;
  justify-self: end;
  place-self: center;
  grid-column: span 2;
}

 

align-self, justify-self를 사용하여 개별로 설정할 수 있음.

gird-column: span 2 > 2개의 칸을 차지함.

 

 

3. Align and Justify Content

 

.father{
  display: grid;
  gap: 10px;
  min-height: 50vh;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  background-color: lightblue;
  justify-content: center;
  align-content: center;
  place-content: center center
}

 

justify-content, align-content   

 

place-content 로 줄여서 쓰기 가능.

 

 

 

4. Auto Sizing and Minmax

 

max-content : 문장이 한 줄에 표시될 정도의 크기로 설정

min-content : 문장의 가장 긴 단어의 길이로 크기를 설정

 

.father{
  display: grid;
  gap: 10px;
  height: 100vh;
  grid-template-columns: 1fr max-content 1fr;
}

 

minmax (최소값, 최대값) 

 

5. Auto Fill and Auto Fit

 

auto-fill : 열을 최대한 많이 만든다.

auto-fit : 사용하는 공간만 만든다. 빈 열을 합쳐버림.

 

.father{
  display: grid;
  gap: 10px;
  height: 100vh;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
반응형