CSS / Grid / 실전 예제
높이가 같은 박스 만들기
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; } .jb-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-gap: 10px; } .jb-item { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div class="jb-container"> <div class="jb-item">Item 1</div> <div class="jb-item">Item 2</div> <div class="jb-item">Item 3</div> <div class="jb-item">Item 4</div> </div> </body> </html>
한 박스의 내용이 많아져 박스의 높이가 커지면, 다른 박스의 크기도 같이 늘어난다. 즉, 가장 큰 높이에 맞춰진다.