<body>
<div class="container">
<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>
</body>
<style>
* {
margin:0;
}
body {
font-size:1.5rem;
}
.item {
display:block;
background-color:orange;
}
.item:nth-child(odd) {
background-color: darkslateblue;
}
.container {
background-color:lightgray;
}
</style>
위의 코드로 기본 세팅을 해주자.
감싸고 있는 부모 container 에게 다음과 같은 속성을 추가하였다.
.container {
display:grid;
grid-template-columns:4fr 6fr;
grid-gap:1rem;
background-color:lightgray;
}
40% 60% 로 나눠진 모습이 보이며, 간격은 1rem 씩이다. %보다 fr 쓸 것을 권장한다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
background-color: lightgray;
}
repeat 를 사용해서 1fr 이 3번 반복하라는 뜻이다.
즉, 이 코드는 grid-template-columns: 1fr 1fr 1fr 과 결과가 같다.
만약 어떤 부분은 고정을 하고 싶다면 px 단위를 써주면 된다.
grid-template-columns: 200px 1fr;
보라색 부분은 고정되어 있는데, 주황색 부분은 화면 창에 따라 크기가 바뀐다.
grid-template-columns:1fr 1fr 1fr;
grid-auto-rows:200px;
다음과 같은 코드를 작성하면 아래와 같이 글자가 삐져나오는 경우가 있다.
200px 보다 안의 내용물이 더 크기 때문이다.
↓
그래서 다음과 같이 사용해야 한다.
grid-template-columns:1fr 1fr 1fr;
grid-auto-rows:minmax(200px, auto);
코드 결과 아래 컨텐츠 두 줄은 200px 크기이지만 위의 첫줄은 내용물 크기만큼 커져있다.
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows:minmax(10em, auto);
grid-gap:1rem;
justify-items:end;
이번엔 justify-items 속성을 주었다. 이 속성은 그리드의 item 들을 어느쪽으로 위치할지 결정하는 속성이다.
start, center, end 등의 속성값이 있다.
end 적용하면 아이템들이 각 공간 안에서 오른쪽으로 정렬되어 있는 모습을 볼 수 있다.
↓
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows:minmax(10em, auto);
grid-gap:1rem;
align-items:start;
이번엔 align-items : start 속성을 주었다. 그 결과 위쪽으로 붙는 것을 확인할 수 있다.
개발자 도구로 확인해보면 더 정확하게 알 수 있다.
※ 결론
justify-items 는 수평으로 움직이고, align-items 는 수직으로 움직인다는 것을 기억해두자.
다음은 한 아이템만 움직이는 속성을 알아볼 것이다.
.item:nth-child(5) {
justify-self: start;
}
5번째 아이템만 가로로 정렬될때 시작지점에 위치하고 싶다면 이렇게 코드를 작성하면 된다.
(align-self 도 이와 같이 적용할 수 있다. (위아래로 움직이는 것과 관련))
1번 아이템을 만약 윗 공간을 다 쓰게 해주고 싶다면 어떻게 해야할까?
먼저 우린 row(행) 과 column(열) 에 대해서 알아봐야 하는데, row 는 가로, column 는 세로로 세어주면 된다.
우리가 여태까지 알아본 그리드의 row 와 column 은 위와 같이 각각 4개씩 존재한다.
item:nth-child(1){
grid-column:1/4;
}
이 코드의 의미는 첫번째 아이템에 적용하는 것이며, column 을 1부터 4까지 늘인다는 의미이다.
↓
이제 4번째 아이템의 row 를 2~4까지 늘이고 싶다면
item:nth-child(4){
grid-row:2/4;
}
이렇게 작성해주면 되는데 실행결과가....
이렇게 4번째 아이템이 늘어나긴 했으나 갑자기 제멋대로 공간을 이동해버렸다.
그럴땐 .... 시작점을 지정해주면 된다!
item:nth-child(4){
grid-column:3;
grid-row:2/4;
}
위와 같이 열의 3번째 지점에서 시작하도록 지정해주었다.
↓
※ 이렇게 시작지점을 정해주고 길이를 늘려주는 등을 해서 아이템들을 겹치도록 지정할 수도 있다. (여기서는 생략)
flexbox 속성과 비슷한 부분이 많아서 예전에 작성한 내 게시물과 같이 봐야겠다. 이것도 1분 코딩 유튜브를 참고한 것..
2020.05.15 - [html , css] - flexbox에 대하여
본 게시물은 유튜브 1분 코딩님의 강의를 보고 개인적으로 정리 및 공부한 내용입니다.
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 애니메이션 속성 (0) | 2021.09.28 |
|---|---|
| CSS - transition 속성 (0) | 2021.09.28 |
| CSS - 가변형 그리드 (옛날 방식) (0) | 2021.09.27 |
| CSS - overflow hidden, flow , gradient 속성 (0) | 2021.09.21 |
| CSS - 수직 가운데 정렬, position 속성 (0) | 2021.09.21 |