플렉스
→ 보통 1줄을 정렬할 때 사용
그리드
→ 보통 2줄 이상을 정렬할 때 사용
그리드 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{
border: 1px solid black;
}
.item{
width: 50px;
height: 50px;
}
</style>
<title>Document</title>
</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 class="item">10</div>
</div>
</body>
</html>
스타일에 추가
.container{
display: grid;
grid-template-columns: auto auto auto auto;
}
grid-template-columns: repeat(5, auto);
이런식으로도 사용가능
이런식으로도 사용가능
.container{
display: grid;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.container{
display: grid;
height: 200px;
grid-template-columns: auto auto auto auto auto;
justify-items: center;
}
* 보통 justify는 content를 사용한다.
.container{
display: grid;
height: 200px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
align-content: center;
}
gap: 10px;
row-gap, column-gap 사용하면 가로만, 세로만 갭을 줄 수 있다.
grid-template-columns: 2fr 8fr 2fr;
grid-template-columns: 100px 100px 1fr;
fr은 fr끼리 비율을 차지함
'프론트엔드 > html css' 카테고리의 다른 글
| 반응형 웹 (0) | 2023.06.27 |
|---|---|
| 토스 페이지 그려보기 (0) | 2023.06.26 |
| 그리드 연습 사이트 (0) | 2023.06.26 |
| 플렉스 (0) | 2023.06.26 |
| 절대경로, 상대경로 (0) | 2023.06.26 |