index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レスポンシブ基礎3|フルードレイアウト</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .wrapper{ max-width: 1080px; display: flex; gap: 40px; margin: 100px auto; background-color: #888; padding: 0 20px; } .box{ width: calc((100% - 120px) / 4); aspect-ratio: 1/1;/* 横/縦の比率 */ background-color: #5ebcd6; } @media (max-width:800px){ .wrapper{ flex-wrap: wrap; } .box{ width: calc((100% - 40px) / 2); } } @media (max-width:480px){ .box{ width: 100%; } } </style> </head> <body> <div class="wrapper"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div><!-- /.wrapper --> </body> </html>
