CSS Grid

Grid를 공부해봅시다

Flex는 1차원 레이아웃이고 Grid는 가로세로 2차원 레이아웃이다👍

<div class="container">
	<div class="item A">A</div>
	<div class="item B">B</div>
	<div class="item C">C</div>
	<div class="item D">D</div>
	<div class="item E">E</div>
	<div class="item F">F</div>
	<div class="item G">G</div>
	<div class="item H">H</div>
	<div class="item I">I</div>
</div>

flex와 같은 점은

1, Container와 Item이 존재한다는 점👍

2, Container와 Item에 적용하는 속성이 따로 있다는 점👍

.container {
	diplay: grid;
}

설정해주면 적용 끝😊

⏺ Grid 단위

fr : 사용 가능한 공간에 대한 비율을 의미

.container {
grid-template-columns: 1fr 2fr ;
}
width가 300px 이면 1fr은 100px 2fr은 200px

min-content : grid item이 포함하는 content의 최소 크기

.container {
  grid-template-columns: min-content 1fr;
}

<div class="container">
  <div class="item">---내용의 최소 크기---</div>
  <!-- ... -->
</div>

max-content : grid item이 포함하는 content의 최대 크기

.container {
  grid-template-columns: max-content 1fr;
}

<div class="container">
  <div class="item">---내용의 최대 크기---</div>
  <!-- ... -->
</div>

한글을 사용하는 경우 word-break: keep-all;를 설정하면 정상적으로 동작합니다.

⏺ 레이아웃 만들기

⏹ grid-template-columns / grid-template-rows

.container {
	grid-template-columns : 1fr 1fr 1fr;     /*열의 배치*/
	/*grid-template-columns : 100px 100px 100px;*/
	/*grid-template-columns : 1fr 200px 300px;*/
	/*grid-template-columns : repeat(3,2fr);*/
	/*grid-template-columns : 1fr 200px auto;*/

	grid-template-rows : 1fr 1fr 1fr;  /*행의 배치*/
	/*grid-template-rows : 100px 100px 100px;*/
	/*grid-template-rows : 1fr 200px 300px;*/
	/*grid-template-rows : repeat(3,2fr);*/
	/*grid-template-rows : 1fr 200px auto;*/
}

.container {
grid-template-columns : 1fr 200px 2fr;
}

column을 1fr 200px 2fr로 레이아웃을 만들어라!

-> width가 1000px일 때 1000px 에서 200px을 제외한 800px 중 A : C = 1 : 2비율로 레이아웃을 만든다

🔼repeat(반복할 횟수,반복값)

반복되는 값을 처리해 주는 함수
repeat(3,100px,200px)은 100px 200px 100px 200px 100px 200px과 같다

🔼minmax(최소값,최대값)

최솟값과 최댓값을 지정할 수 있는 함수
minmax(200px,auto) -> 최소값: 200px 최대값:auto
grid 내용의 양이 적더라도 200px 밑으로는 내려가지 않고 최대값은 자동적으로 늘어나게 처리함

비슷한 함수로 fit-content가 있음
fit-content(최대크기);

.container {
  grid-template-columns: fit-content(100px) fit-content(100px);
}

해석하면

.container {
  grid-template-columns: minmax(auto,100px) fit-content(auto,100px);
}

🔼auto-fill / auto-fit

두 속성 모두 레이아웃의 개수를 정하지 않고 설정된 너비 안에서 최대한 셀을 채운다

.container {
	display: grid;
  	grid-template-columns: repeat(auto-fill, minmax(20%, auto))
};

.container {
	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(20%, auto))
};

auto-fill과 auto-fit의 차이는 위와 같다
auto-fill은 width:100%일 때 갯수가 모자라면 공간이 남지만
auto-fit은 공간을 무조건 채운다

⏹ row-gap column-gap gap -> gap

.container {
	row-gap: 10px; /* row의 간격을 10px로 */
	column-gap: 10px; 	/* column의 간격을 10px로 */
    
    gap: 10px 20px  /*row-gap:10px ; column-gap:20px*/

}

⏹ grid-auto-columns / grid-auto-rows

grid-template-columns와 grid-template-rows로 정의한 레이아웃을 Item이 정의된 레이아웃이 아닌 외부에 배치되었을 때 크기를 조절할 수 있는 속성

grid-auto-rows: 50px로 통제를 벗어난 Item의 행의 길이를 50px로 설정해줌

위처럼 정의한 열과 행은 3X3 이지만 통제를 벗어난 부분의 Item의 크기를 조정할 수 있다

.container {
	grid-auto-columns : minmax(100px,auto);
}

위처럼 row나 column의 갯수를 지정하지 않는다면 모든 row/column을 grid-auto-rows로 처리를 할 수 있다

.container {
	grid-template-columns: 100px;
	grid-auto-columns: 1fr 2fr 3fr;
}

.item:nth-child(1) { grid-column: 2; }
.item:nth-child(2) { grid-column: 3; }
.item:nth-child(3) { grid-column: 4; }
.item:nth-child(4) { grid-column: 5; }
.item:nth-child(5) { grid-column: 6; }
.item:nth-child(6) { grid-column: 7; }

명시한 columns: 100px을 제외하고는 모든 셀을 1:2:3 비율로 레이아웃을 정해준다

grid-column: (grid-column-start) / (grid-column-end)
grid-row: (grid-row-start) / (grid-row-end)
grid-column: 1 / span 2; 
grid-column: span 2;   //그 자리에서 column 2칸을 점유

⏹ grid-template-areas

.container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    " .     .     .  "    /*.(마침표) 또는 none을 입력해 빈 영역을 정의해 줄 수 있다*/
    "footer footer footer";
}

header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

❗grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성입니다.

⏹ grid-template

grid-template : grid-template-rows, grid-template-columns;

.container{
	grid-template: 100px 100px 100px , 100px 100px 100px;	
}

.container {
  grid-template:
    "grid-template-areas" row
    / <grid-template-columns>;
}

예를 들면

.container {
  display: grid;
  grid-template:
    "header header header" 100px
    "main main aside" 250px
    "	.	.	.	"
    "footer footer footer" 120px
    / 2fr 150px 1fr;
}

해석하면

.container {
  display: grid;
  grid-template-rows: grid-template-rows: 100px 250px 120px; 
  grid-template-columns: 2fr 150px 1fr;
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}

⏹ grid-auto-flow

아직 배치하지 않은 Item을 어떤 방식으로 배치할지 정의하는 속성

row - 각 행 축을 따라서 차례대로 배치 (기본값)

column - 각 열 축을 따라 차례대로 배치

row dense(dense) - 각 행 축을 따라 차례대로 배치, 빈 공간을 채움

column dense - 각 열 축을 따라 차례대로 배치, 빈 공간을 채움

⏹ grid

grid-template-rows/columns와 grid-auto-rows/columns 단축 속성

.container {
  grid: grid-template;
  /*grid: grid-template-rows / grid-auto-flow grid-auto-columns;*/
  /*grid: grid-auto-flow grid-auto-rows / grid-template-columns;*/
}

⏹ grid: grid-template-rows / grid-template-columns;

.container {
  grid: 100px 200px / 1fr 2fr;
}

해석하면

.container {
  grid-template-rows: 100px 200px;
  grid-template-columns: 1fr 2fr;
}

출처:https://heropy.blog/2019/08/17/css-grid/

⏹ gridarea

grid-row-start, grid-column-start, grid-row-end 그리고 grid-column-end의 단축 속성

.item {
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}

예로

.item {
	grid-area: 3 / 2 / 5 / -1;
}

해석하면

.item {
	grid-row: 3 / 5; 
    	grid-column: span 2 / -1;
}

⏺ 정렬

⏹열 축 정렬: align-content

Grid content 열 축 정렬

Grid Item들의 높이를 모두 합한 값이 Grid Contanier의 높이보다 작을 때 Grid Item들 모두를 정렬합니다

출처:https://heropy.blog/2019/08/17/css-grid/

⏹행 축 정렬: justify-content

Grid Item들의 너비를 모두 합한 값이 Grid Container의 너비보다 작을 때 Grid 아이템들을 통째로 정렬합니다.

⏹place-content

align-content와 justify-content를 같이 쓸 수 있는 단축 속성

.container {
  place-content: align-content justify-content;
}

.container {
  place-content: center space-around; 
  /*해석*/
  /*align-content: center*/
  /*justify-content: space-around*/
}

.container {
  place-content: center ; 
  /*해석*/
  /*align-content: center*/
  /*justify-content: center*/
}

⏹align-items

Grid Items들을 열 축 정렬함
Grid Items의 세로 너비가 자신이 속한 그리드 행 크기보다 작아야함

⏹justify-items

Grid Items들을 행 축 정렬함
Grid Items의 가로 너비가 자신이 속한 그리드 열 크기보다 작아함

⏹order

Grid Item의 시각적 나열 순서를 변경할 수 있음
낮은 숫자일 수록 앞에 배치되며 단순히 시각적인 효과임으로 시각 장애인분들이 사용하는 스크린리더로 화면을 읽을 때, order를 이용해 순서를 바꾼것은 의미가 없음

.item:nth-child(1){
  order:4;
}
.item:nth-child(2){
  order:2;
}
.item:nth-child(3){
  order:3;
}
.item:nth-child(4){
  order:1;
}

⏹Z-index

Z축 정렬해줄 수 있는 속성 숫자가 클 수록 위로 올라옴

.item{
	z-index: 1;   /*0이 기본값*/
}