목록그리드 (1)

영국 척척석사 유학생 일기장👩🏻‍🎓

(CSS코딩일기) 그리드 grid

1. 그리드 나누기display 속성을 grid로 하고 grid-template-columns 속성으로 열을, grid-template-rows 속성으로 행을 나눌 수 있습니다. 예를 들어거 3x2 그리드를 만드는데, 열 너비는 각각 100px, 200px, 100px이고 행 너비는 150px, 200px이라면 아래와 같이 쓸 수 있습니다.display: grid;grid-template-columns: 100px 200px 100px;grid-template-rows: 150px 200px; 2. 유연한 크기 단위fr 이라는 단위를 사용하면 플렉스박스처럼 전체 크기에 대해 상대적인 값을 지정할 수 있습니다. 예를 들어서 3x2 그리드에서 열의 너비를 1:1:1로 하고 싶다면 아래와 같이 하면 됩니다.d..
코딩공부/HTML&CSS 2023. 10. 5. 14:46
이전 Prev 1 Next 다음