<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๊ทธ๋ฆฌ๋(์ค์์ค์)</title>
</head>
<style>
.container {
/* ๋ถ๋ชจ๋ฅผ grid container, ์์์ grid item์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.*/
display: grid;
background-color: bisque;
/*grid-template-columns: 100px 200px 50px;*/
/* fr์ ๋น์จ๋ก ๋ฐ์ง๋ผ๋ ๊ฒ */
/* grid ๋ถ๋ชจ์ width๋ฅผ 4๋ก ๋๋ ๋ค์ 3:1 ๋น์จ๋ก ๋๋ ๊ฐ์ ธ๋ผ */
/*grid-template-columns: 3fr 1fr; !* ์ ์ฒด 4์ค์ 3๊ณผ 1์ฉ ์ฐจ์งํจ *!*/
/*grid-template-columns: repeat(5, 1fr); !* ๊ท ๋ฑํ๊ฒ ๋๋ ๊ฐ์ง๋ ๊ฒฝ์ฐ๋ repeat์ ์ฌ์ฉํ ์ ์๋ค *!*/
/*grid-template-columns: 100px repeat(3, 1fr); !* ๋งจ ์ฒ์ ์ด์ 100px๊ณ ์ . ๋๋จธ์ง 3์ด์ ๋จ์ ๋ถ๋ถ์ ๊ท ๋ฑํ๊ฒ ๋๋ ๊ฐ์ ธ๋ผ *!*/
/* minmax: ์ต์๊ฐ๊ณผ ์ต๋๊ฐ์ ์ง์ ํ ์ ์์
minmax(100px, auto) ์ต์ 100px์ด๊ณ , ์ต๋๋ ์๋์ผ๋ก ๋์ด๋๋ผ.
=> ์๋ฌด๋ฆฌ ๋ด์ฉ์ด ์์ด๋ 100px๋ ๊ฐ์ง๊ณ ์๊ณ , ์ปค์ ธ์ผ ํ๋ ์ํฉ์ด๋ฉด ์์์ ๋์ด๋๋ผ
*/
/*grid-template-columns: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);*/
/*grid-template-columns: repeat(3, minmax(auto, 200px));*/
/*
auto-fill, auto-fit: ์ด ๊ฐ์๋ฅผ ๋ฏธ๋ฆฌ ์ ํ์ง ์๊ณ , ์ค์ ๋ ๋๋น๊ฐ ํ์ฉํ๋ ํ ์ต๋ํ ์์๋ค๋ก ์ฑ์๋ผ
auto-fit์ ์ฌ๋ฐฑ์ด ๋ฐ์ํ๋ฉด ๋จ๋ ๊ณต๊ฐ์ ๋๋ ค์ ์ฑ์์ค
*/
/*grid-template-columns: repeat(auto-fill, minmax(20%,auto));*/
grid-template-columns: repeat(auto-fit, minmax(20%,auto));
/*
grid- ๊ฐ ๋ถ๋ ์์ฑ์ ๋ธ๋ผ์ฐ์ ํธํ ๋ฒ์๋ฅผ ๋ํ ใ
ฃ์ํด ๋ค์ ๋์จ ๊ฒ์ด๋ค. ๋ญ ์ฌ์ฉํด๋ ์๊ด์์
*/
gap: 20px 10px; /* row column */
/*column-gap: 20px;*/
/*row-gap: 20px;*/
}
.item{
background-color: orange;
}
.item:first-child{
grid-column-start: 1;
grid-column-end: 3;
grid-column: 1 / span 2; /* 1๋ถํฐ ์์ํด์ 2์นธ ์ฐจ์งํด๋ผ */
}
.item:nth-child(4){
grid-row-start: 2;
grid-row-end: 4;
grid-row: 2 / 4; /* ์ ๋๊ฐ(start, end) ํฉ์น๊ฑฐ */
}
/**********************************************/
.container2{
display: grid;
margin-top: 20px;
background-color: #e3c8ff;
grid-template-columns: 1fr 2fr 4fr;
grid-template-rows: 100px 200px;
/*justify-items: center;*/
/*align-items: center;*/
grid-gap: 10px;
grid-template-areas:
"a1 a2 a5"
"a3 a4 a5"
". a6 . ";
}
.item2{
background-color: orange;
}
.item2:nth-child(1){
grid-area: a1;
}
.item2:nth-child(2){
grid-area: a2;
}
.item2:nth-child(3){
grid-area: a3;
}
.item2:nth-child(4){
grid-area: a4;
}
.item2:nth-child(5){
grid-area: a5;
}
.item2:nth-child(6){
grid-area: a6;
}
</style>
<body>
<div class="container">
<!-- div.item{item$}*10-->
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
</div>
<div class="container2">
<!-- div.item{item$}*10-->
<div class="item2">item1</div>
<div class="item2">item2</div>
<div class="item2">item3</div>
<div class="item2">item4</div>
<div class="item2">item5</div>
<div class="item2">item6</div>
</div>
</body>
</html>
