반응형
https://www.youtube.com/watch?v=nxi1EXmPHRs
위 유튜브를 따라해 본 것 입니다.
부모 요소에게만 그리드 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="basic-style.css" />
<link rel="stylesheet" href="image.css" />
<title>Document</title>
</head>
<body>
<section class="container">
<img
src="https://images.unsplash.com/photo-1661933021480-75b708d5648f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
alt="img"
class="image image1" />
<img
src="https://images.unsplash.com/photo-1661912267451-712c028d74a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
alt="img"
class="image image2" />
<img
src="https://images.unsplash.com/photo-1661895581832-51c8e3538b4d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="img"
class="image image3" />
<img
src="https://images.unsplash.com/photo-1661836890977-1cc392056094?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
alt="img"
class="image image4" />
<img
src="https://images.unsplash.com/photo-1661900980235-db5affe17d8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80"
alt="img"
class="image image5" />
<img
src="https://images.unsplash.com/photo-1661901060088-32dbfeb040df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="img"
class="image image6" />
<img
src="https://images.unsplash.com/photo-1661890090656-6bf16bbdee4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80"
alt="img"
class="image image7" />
</section>
</body>
</html>.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
굉장히 띄엄 띄엄 있음
자식 요소에게 크기를 정해줌
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
grid-template-areas
body {
padding: 5rem;
background-color: black;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
gap: 1rem;
grid-template-areas:
'a a a'
'b c c'
'b d g'
'e f g'
;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.image1 {
grid-area: a;
}
.image2 {
grid-area: b;
}
.image3 {
grid-area: c;
}
.image4 {
grid-area: d;
}
.image5 {
grid-area: e;
}
.image6 {
grid-area: f;
}
.image7 {
grid-area: g;
}
'Code > CSS' 카테고리의 다른 글
| css flex system (1) | 2024.04.19 |
|---|---|
| css grid system 1 (1) | 2024.04.19 |
| Bootstrap (1) | 2024.01.02 |
| 레이어팝업 css 반응형으로 만들기. (0) | 2023.12.28 |