番外編:行数が異なる画像の横並びの練習
番外編:行数が異なる画像の横並びの練習
CSS Gridで設定
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>【コーディング練習】行数が異なる画像の横並びの練習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/grid.css"> </head> <body> <div class="content"> <h2 class="content-title">PROJECT</h2> <ul class="img-block"> <li><img src="img/project1.jpg" alt=""></li> <li><img src="img/project2.jpg" alt=""></li> <li><img src="img/project3.jpg" alt=""></li> <li><img src="img/project4.jpg" alt=""></li> <li><img src="img/project5.jpg" alt=""></li> <li><img src="img/project6.jpg" alt=""></li> <li><img src="img/project7.jpg" alt=""></li> </ul> </ul><!-- /.img-block --> </div><!-- /.content --> </body> </html>
@charset "UTF-8"; /* ---------------------------------------- reset ---------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; border: none; } img { max-width: 100%; vertical-align: bottom; } /* ---------------------------------------- layout ---------------------------------------- */ .content { margin-top: 100px; padding: 0 20px; } .content-title { margin-bottom: 80px; font-size: 16px; font-weight: normal; } .img-block { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .img-block li:first-child { grid-column: 1 / 3; grid-row: 1 / 2; } @media screen and (min-width: 900px) { .content { max-width: 1200px; margin: 100px auto 0; } .img-block { grid-template-columns: 40% 1fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); } .img-block li:first-child { grid-column: 1 / 2; grid-row: 1 / 3; } }