반응형
display: flexflex-direction: row;
flex-direction: column;
css에서 보통 Flex를 많이 이용했을 것이다
Flex는 한 방향 레이아웃이다
row 혹은 column 속성을 줘서 일렬로 정렬한다
Grid는 row, column을 둘다 정렬할 수 있는 레이아웃이다
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 33% 33% 33%;
padding: 10px;
}
.item {
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
각각의 div를 배치하고 싶은대로 배치할 수 있다
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 33% 33% 33%;
padding: 10px;
}
.item {
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}
#item1 {
grid-row: 1;
grid-column: 1/span 2;
}
#item2 {
grid-row: 1;
grid-column: 3/span 1;
}
#item3 {
gird-row: 2;
grid-column: 1/span 3;
}
#item4 {
gird-row: 3;
grid-column: 1/span 1;
}
#item5 {
gird-row: 3;
grid-column: 2/span 1;
}
#item6 {
gird-row: 3;
grid-column: 3/span 1;
}
#item7 {
gird-row: 4;
grid-column: 1/span 1;
}
#item8 {
gird-row: 4;
grid-column: 2/span 2;
}
#item9 {
gird-row: 4;
grid-column: 1/span 3;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
<div class="item" id="item3">3</div>
<div class="item" id="item4">4</div>
<div class="item" id="item5">5</div>
<div class="item" id="item6">6</div>
<div class="item" id="item7">7</div>
<div class="item" id="item8">8</div>
<div class="item" id="item9">9</div>
</div>
</body>
</html>
단순 정렬 외에도 속성이 많다
div 정렬 시 활용할 수 있는 방법이 많으니 유용하게 사용하자
반응형
'CSS' 카테고리의 다른 글
| [#. CSS] css gradient 그라데이션 색상 코드 제공해주는 사이트 (0) | 2021.01.12 |
|---|---|
| [#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image (1) | 2020.12.24 |
| [#. CSS] 반응형 웹 모바일, 태블릿 디바이스별 CSS 적용하기 미디어 쿼리 media query (0) | 2020.10.27 |
| [#CSS] iframe 유튜브 영상 첨부 시 비율에 따라 크기 조절하기 (0) | 2020.09.18 |
| [#CSS] Swiper 슬라이드 생성하기, 이미지 슬라이드, 유튜브 슬라이드 (0) | 2020.09.17 |
