-
CSS - display(grid)프론트엔드/HTML,CSS 2024. 3. 24. 15:04728x90
여태까지 레이아웃을 나눌 때 display:flex를 사용하여 레이아웃을 나누곤 했다.
이번엔 grid를 간단하게 사용해보았다.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="header"> <div class="left">1째줄 왼쪽</div> <div class="center">1째줄 가운데</div> <div class="right">1째줄 오른쪽</div> <div class="left2">2째줄 왼쪽</div> <div class="center2">2째줄 가운데</div>ㄴ <div class="right2">2째줄 오른쪽</div> </div> </body> </html>레이아웃을 나눠보기위해 간단하게, header div를 생성하고, 명시적으로 보여주기위해,
1째줄왼쪽부터 2째줄 오른쪽이라는 글자를넣어주었다.
CSS
.header { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "left center right" "left-2 center-2 right-2" "left-3 center-3 right-3"; } .left { grid-area: left; } .center { grid-area: center; } .right { grid-area: right; } .left-2 { grid-area: left2; } .center-2 { grid-area: center2; } .right-2 { grid-area: right2; }1. 레이아웃을 나눌태그에 display:grid속성을 부여해준다.
2.grid-template-columns, grid-template-rows를 원하는 크기로 설정해준다.
나는 2행 3열로 나누기위해 columns에 1fr 1fr 1fr을,rows에 1fr 1fr을 설정해주었다.
이때, 1fr은 컴퓨터가 크기를 똑같이 분배해준다고 생각하면된다. 예를들어 넓이가 500px일때,
columns에 50px 50px 1fr로 설정하게되면, 1fr = 400px로 설정이된다.3.grid-template-area 설정을 해준다
"left center right"
"left-2 center-2 right-2"
"left-3 center-3 right-3"각 구역의 닉네임을 설정해준다.
4. 클래스 grid-area에 위에서 설정한 닉네임(?)을 작성해주면
이러한 결과를 볼 수 있다.
728x90'프론트엔드 > HTML,CSS' 카테고리의 다른 글
SCSS파일 index.scss로 관리해주기 (0) 2023.08.23 [CSS] em 과 rem (0) 2023.08.02 SASS란? (0) 2023.07.31 버튼 클릭시 색상을변경하기(feat. 리엑트) (0) 2023.07.05