View Single Post
chucker
 
Join Date: May 2004
Location: near Bremen, Germany
Send a message via ICQ to chucker Send a message via AIM to chucker Send a message via MSN to chucker Send a message via Yahoo to chucker Send a message via Skype™ to chucker 
2022-07-19, 14:29

For example:

Code:
<!DOCTYPE html> <html> <style> .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } @media screen and (max-width: 1200px) { .container { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 600px) { .container { grid-template-columns: 1fr; } } </style> <body> <!-- Header --> <div class="header"> <h1>Camera Snapshot Grid</h1> </div> <!-- Photo Grid --> <div class="container"> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> <div style="width:100%; background:red">&nbsp</div> <div style="width:100%; background:blue">&nbsp</div> <div style="width:100%; background:green">&nbsp</div> </div> </body> </html>
This will show a grid with four columns if wide enough, otherwise two, otherwise one.
  quote