목록GRID (1)

Outputor

Grid

Grid 격자를 만드는 레이아웃임 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열됨 grid-template-columns는 가로 격자의 개수임 grid-template-rows는 세로 격자의 개수임 fr: 몇배만큼 차지할지를 나타내는 값임 grid-gap: 그리드 사이 간격을 줌 grid-template-rows에서 fr단위를 줄 때는 height값을 설정해줘야 함 큰 레이아웃을 잡을 때보다 자잘한 부분에서 엑셀같은 격자가 필요할 때 쓰면 효과적임 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px; } G..
🎨 CSS 🔻 2022. 1. 17. 16:47
이전 Prev 1 Next 다음