Frontend/CSS
2022. 9. 10.
[CSS] Grid (repeat,minmax,fr)
flex box에서 grid 형태를 만들기 어렵다. grid 기능을 활용하면 쉽게 만들 수 있다. 사용법 부모 요소에서 display를 grid로 지정해준다. grid-template-columns속성과 grid-template-rows속성을 이용해서 grid의 전체적인 틀을 만들어준다. grid의 간격을 지정해줄 수도 있다. column-gap : 열끼리의 사이 공간 row-gap : 행끼리의 사이 공간 gap : 열과 행의 공간 크기가 같다면 한 번에 지정 가능 위의 내용만을 사용해 grid를 만들어보자! 부모 요소 안에 4개의 자식 div 태그를 넣어줬다. .container { display:grid; grid-template-columns : 100px 100px; grid-template-ro..
![[CSS] Grid (repeat,minmax,fr)](http://i1.daumcdn.net/thumb/C230x230/?fname=https://blog.kakaocdn.net/dn/czHV5F/btrLLjtNVEA/VxRbBjCA3IuOibkPx24lDK/img.png)