초보 개발자의 일기

Place Items item들을 배치하는 방법 justify-item , align-item, place-item이 있다. justify-item .grid { display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); justify-items: stretch; } justify-item의 기본형은 stretch이다. justify-items: start; justify-items: end; align-item align-item은 가로로 쭉 늘어진 형태를 보인다. align-items: start; align-items: end; place-item plac..

Grid Template Areas -grid-template-columns: 열 방향으로 길이를 설정 -grid-template-row: 행 방향으로 길이를 설정 -repeat:(4,200px): 4번 200px를 반복 ex) -grid-template-columns: repeat(4,200px); /*grid-template-columns: 200px 200px 200px 200px;*/ -grid-template-row:repeat(4,300px); /*grid-template-row: 300px 300px 300px 300px;*/ index.html style.css .header { background-color: black; grid-area: header; } .content { backg..