신예리의 개발자취

Grid Container 정렬하기 004.html header content nav footer 004.css .grid { background-color: black; color: white; display: grid; gap: 5px; height: 50vh; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: springgreen; } .content { background-color: deepskyblue; } .nav { background-color: mediumpurple; } .footer { background-color: orange; } ju..

Grid Container display: grid;와 display: inline-grid; grid-template-columns column의 너비와 개수를 정한다. grid-template-rows row의 높이와 개수를 정한다. 추가 속성 반복(repeat) minmax auto-fill auto-fit max-content와 min-content 참고 repeat() - CSS: Cascading Style Sheets | MDN The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring patte..