grid
여러개 정렬 배치 할때 사용
grid-template-columns
그리드 컬럼 열 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-box {
width: 500px;
height: 500px;
background-color: skyblue;
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-between;
}
.inner-box1 {
width: 100px;
height: 100px;
background-color: red;
}
.inner-box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.inner-box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="inner-box1">1</div>
<div class="inner-box2">2</div>
<div class="inner-box3">3</div>
</div>
</body>
</html>grid- gap
cloumn과 행 사이에 공백을 줄 수 있다
grid- column
grid-column: 1/3;은 그리드의 첫 번째 열에서 세 번째 열 전까지 (즉, 1열부터 2열까지) 차지하게 됩니다. 이 말은 1열과 2열을 모두 포함한 두 개의 칸을 차지하게 된다는 의미입니다.
jsutify-content(수평 정렬)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-box {
width: 500px;
height: 500px;
background-color: skyblue;
display: grid;
grid-template-columns: 1fr 1fr;
}
.inner-box1 {
width: 100px;
height: 100px;
background-color: red;
}
.inner-box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.b1 {
display: grid;
align-items: end;
}
.b2 {
display: grid;
justify-content: end;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="b1">
<div class="inner-box1">1</div>
</div>
<div class="b2">
<div class="inner-box2">2</div>
</div>
</div>
</body>
</html>
align-items(수직 정렬)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer-box {
width: 500px;
height: 500px;
background-color: skyblue;
display: grid;
grid-template-columns: 1fr 1fr;
}
.inner-box1 {
width: 100px;
height: 100px;
background-color: red;
}
.inner-box2 {
width: 100px;
height: 100px;
background-color: blue;
}
.b1 {
display: grid;
align-items: end;
}
.b2 {
display: grid;
justify-content: end;
}
</style>
</head>
<body>
<div class="outer-box">
<div class="b1">
<div class="inner-box1">1</div>
</div>
<div class="b2">
<div class="inner-box2">2</div>
</div>
</div>
</body>
</html>
이름을 부여하기
이렇게 이름을 부여해서 각 <div>별로 이름을 통해 style을 줄 수 있다.
Share article
