How To Create Responsive Layouts With Grid Example

<!DOCTYPE html>
<html>
<head>
<title>Responsive Grid Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f8f9fa;
  }
  .grid-container {
    display: grid;
    /* Create a 3-column layout by default */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  .grid-item {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-top: 4px solid #007bff;
  }
  
  /* On tablets or smaller screens, switch to 2 columns */
  @media (max-width: 900px) {
    .grid-container {
      grid-template-columns: 1fr 1fr;
    }
  }

/* On mobile phones, switch to 1 column */
  @media (max-width: 600px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }
</style>
</head>
<body>

<h3>Responsive CSS Grid</h3>
<p>Resize your browser window to see the layout switch from 3 columns, down to 2 columns, and finally to 1 column.</p>

<div class="grid-container">
  <div class="grid-item">
    <h4>Item 1</h4>
    <p>CSS Grid makes laying out elements in two dimensions incredibly straightforward.</p>
  </div>
  <div class="grid-item">
    <h4>Item 2</h4>
    <p>By defining columns using the fractional 'fr' unit, the grid automatically divides the available space.</p>
  </div>
  <div class="grid-item">
    <h4>Item 3</h4>
    <p>Media queries allow us to easily redefine the number of columns at various screen sizes.</p>
  </div>
  <div class="grid-item">
    <h4>Item 4</h4>
    <p>If there are more items than columns, Grid automatically places them on the next row.</p>
  </div>
</div>

</body>
</html>