Flexbox vs Grid : un guide pour choisir la meilleure mise en page avec des exemples

.nav {
  display: flex;
  justify-content: space-between; /* space items evenly */
  background-color: #333;
  padding: 10px;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 15px;
}

<nav>



<p>Result:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173203824841019.jpg" alt="Flexbox vs Grid: A Guide to Choosing the Best Layout with Examples"></p>

<p><strong><em>?Note</em></strong>: For more details, check out this* <em>article</em>.</p>

<h2>
  
  
  <strong>Introducing Grid</strong>
</h2>

<p>CSS Grid is like a two-dimensional chessboard. It lets you place items in rows and columns at the same time, giving you more control over your layout.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false">.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
  grid-gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

<div>



<p>Result:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173203824999999.jpg" alt="Flexbox vs Grid: A Guide to Choosing the Best Layout with Examples"></p>

<h3>
  
  
  <strong>Grid Layout Examples</strong>
</h3>

<p>Let's create a simple gallery layout using Grid:<br>
</p>

<pre class="brush:php;toolbar:false">.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three equal columns */
  gap: 1rem;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div>



<p>Result:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173203825072688.jpg" alt="Flexbox vs Grid: A Guide to Choosing the Best Layout with Examples"></p>

<p><strong><em>?Note</em></strong>: For more details, check out this* <em>article</em>.</p>

<h2>
  
  
  <strong>When to Use Flexbox vs Grid</strong>
</h2>

<p>Use Flexbox for:</p>

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Main content and sidebar */
  gap: 20px;
}

.main-content {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap if needed */
  gap: 10px;
}

.sidebar {
  display: flex;
  flex-direction: column; /* Stack items vertically */
}

.main-content div {
  flex: 1 1 calc(50% - 10px); /* Responsive flex items */
}

<div>



<p>Résultat :</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173203825134188.jpg" alt="Flexbox vs Grid: A Guide to Choosing the Best Layout with Examples"></p>

<p><strong><em>?Remarque</em></strong> : Pour tester les résultats par vous-même, ou pour vous entraîner, n'hésitez pas à copier-coller le code (HTML et CSS) dans Codepen !</p>

<h2>
  
  
  <strong>Pièges et conseils courants</strong>
</h2>