Css Programming Tutorials, Guides & Best Practices

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

In this example, the explicit grid defines three equal columns, while the implicit grid creates rows with a minimum height of 100 pixels.

<div class="grid-container">
  <div class="grid-item flex-container">
    <div class="flex-item">A</div>
    <div class="flex-item">B</div>
  </div>
  <div class="grid-item">C</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}