Grid도 flex와 마찬가지로 부모에 display:grid를 주는 것부터 시작
<style>
.father{
display:grid;
}
.child{
background:tomato;
color:white;
font-size:50px;
display:flex;
}
</style>
<body>
<div> class = "father">
<div class = "child">1</div>
<div class = "child">2</div>
<div class = "child">3</div>
</div>
처음 Grid의 행(row)과 열(column)이 몇 개 있는지 정해야 함
grid-template-colums: 20px 55px 89px 100px;
//원하는 column의 개수 (원하는 크기만큼)
//1번쨰 column은 20px, 2번쨰 column은 55px,
//3번쨰 column은 89px, 4번쨰 column은 100px
grid-templates-rows : 20px 55px 80px 100px;
//원하는 row의 개수 (원하는 크기만큼)
//첫번쨰 row는 20px, 두번쨰 row는 55px, 세번째 row는 80px,
//마지막 row는 100px
Grid에 Space넣기→
grid-templates-columns: 250px 250px 250px;
column-gap:10px;
row-gap:10px;
//gird 자식을 여러 개 생성해도 250px로 고정
//column-gap : 10px 모든 column이 10px의 차이를 갖는다
//row-gap:10px 모든 row가 10px의 차이를 갖는다
== gap:10px;
//격자 모양 -> column ,row gap 모두 넣으면 가능
Grid-repeat
gird-template-colums:repaet(4,200px);
//colums을 4개만드는데 column이 200px를 갖도록
gird-template-rows:repaet(4,300px);
//rows를 4개 만드는데 row가 300px를 갖도록
Grid-template-areas →
을 하기 전 요소마다 이름을 넣어줘야 한다.
grid-area: 이름 - > area의 이름
-class name과 상관이 없음
<style>
.grid{
display:grid;
grid-template-columns:auto repeat(4,200px);;
grid-template-rows:100px repeat(2,200px) 100px;
grid-template-areas:"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer"
}
.header{
background-color:green;
grid-area:header;
}
.content{
background-color:blue;
grid-area:content;
}
.nav{
grid-area:
nav;
background-color:purple;
}
.footer{
grid-area:footer;
background-color:black;
}
</style>
<body>
<div class = "grid">
<div class = "header"></div>
<div class = "content"></div>
<div class = "nav">
</div>
<div class = "footer"></div>
</div>
어디서부터 시작할지 어디서 끝날 지 정할 수 있음(grid-column-start/end)
.grid{
display:grid;
gap:10px;
grid-template-columns:repeat(4,100px);
grid-template-rows:repeat(4,100px)px;
}
.header{
//column과 row가 어디서 시작돠고 어디서 끝날지 정해줄 수 있다. (줄을 의미)
grid-column-start:1;
grid-column-end:2;
//column이 첫번쨰 라인에서 시작해서 두번째 라인에서 끝난다
}
.content{
grid-column-start:1;
grid-column-end:4;
grid-row-start:2;
grid-row-end:4;
}
//요약해서 사용하는 것 또한 가능하다
grid-column:1/5;
grid-row:1/5;
gird-column:1/-1; -> -1의 의미 -> 끝을 의미한다.
begin - to - end
1 / -1
span→ grid-column에 시작과 끝을 적는 대신 사용
grid-column:span 4;
line-naming - >말 그대로 line에 이름 붙이기
.content{
background-color:red;
grid-template-columns : [first-line] 100px [second-line] 100px [third-line] 100px
[fourth-line] 100px [fitth-line] 100px;
grid-template-rows : repaet(4,100px [sexy-line]);
== grid-row : sexy-line 2 / sexy-line 4;
== grid-row : 100px [sexy-line] 100px [sexy-line];
// 각각 1,2,3,4,5번째 줄에 이름을 붙였고 100px로 지정
// row도 마찬가지 방법으로 이름 붙일 수 있다.
Fr→ fraction(부분,측정단위)
Grid의 높이를 지정하지 않으면 사용가능 공간은 없다.
→grid의 높이를 설정해줘야 함
fraction은 사용 가능한 공간을 뜻한다.
display:grid;
height:50vh;
grid-templates-columns: repeat(4,1fr);
//사용가능한 공간(grid container) 1/4를 차지함
grid-templates-rows: repeat(4,1fr);
//
<style>
.grid{
display:grid;
height:50vh;
grid-template:
//row를 적고 header header header header
// row의 높이가 얼마인지 적었음 (1fr)
"header header header header" 1fr
"content content content content" 2fr
"footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr
grid-template-areas:"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer"
}
.header{
background-color:green;
grid-area:header;
}
.content{
background-color:blue;
grid-area:content;
}
.nav{
grid-area:
nav;
background-color:purple;
}
.footer{
grid-area:footer;
background-color:black;
}
</style>
<body>
<div class = "grid">
<div class = "header"></div>
<div class = "content"></div>
<div class = "nav">
</div>
<div class = "footer"></div>
</div>
Justify-items(가로)/align-items(세로)
기본적으로 요소의 높이와 너비가 있어야 적용 할 수 있음
기본값으로 justify-items,align-items의 기본값은 stretch이다.
stretch - > grid-container가 grid를 갖고 있고 grid를 늘여서 grid자체를 커지도록 한다
(자식을 늘려서 부모 컨테이너를 채우게 함)
justify-items:start
→ items들이 처음부터 시작한다 (item들이 늘려져 있지 않다)
place-items
place-items의 첫번째는 수직(세로), 두번쨰는 수평(가로)
place-items:stretch center;
//세로는 stretch 가로로는 center
//align-items:stretch, justify-items:center와 같음
justify-content (Grid의 content를 정렬하는 방법)
column을 대상으로 적용됨(가로)
content : 전체 grid
기본값 : justify-content:start;
justify-content:center; → grid를 중앙에 놔줌
justify-content:end;
justify-content:space-around;
justify-content:space-evenly;
justify-content:space-between;
align-content : row를 정렬시키는 방법(세로)
align-content:start;
align-content:end;
align-content:space-around;
align-content:space-between;
align-content:space-evenly;
place-content
place-content: y x; (수직 수평)
place-content: end center;
== align-content:end; justify-content:center;