적당히를 모르는 text가 box를 넘어 존재하고 있다. 다른 box는 너무 겸손하다. 무척 혼내주고 싶다. grid-template-columns: max-content 100px 첫 번째 column이 필요한 content만큼 width가 늘어났다. 이제 min-c

1fr을 갖는 10개의 column이 4개의 row로 늘어선다. 압력을 가하면 이렇게 변한다. 변화를 막고 최소한의 품위를 유지하게 하고 싶다. 그러기 위해서는 minmax를 사용해야 한다. grid-template-columns: repeat(10, minmax(10

a

기본적인 4 x 4 grid가 있다. 이런 밍밍한 grid를 보면 난잡하게 만들고 싶은 충동에 사로잡힌다. parent에 넣어 child에게 적용하는justify-items를 배워야 할 시간이다.justify-items: stretch은 기본값이다. 기본적으로 자식을

grid-template-columns: repeat(4, 100px) 에서 100px을 1fr으로 바꿨다. fr 는 fraction이다. grid-template-columns: repeat(4, 100px) 일 때 body가 남는다. grid-template-col

다짜고짜 grid와 함께 시작하는 아침이다.

grid는 중요하다. 간편하게 레이아웃을 짤 수 있다. 이제 grid가 얼마나 훌륭한 개념인지 알아보자. 별 볼일 없는 4개의 블럭이 있다. 이 녀석들을 사이에 일정한 공간을 만들고 싶다. cssparent에 flex를 주고 wrap으로 묶고 space-between