How Can I Create a Responsive Grid of Squares Using Flexbox or Grid?

Grid of Responsive Squares

Displaying a grid of squares that respond to varying screen sizes and contain vertically and horizontally aligned content can be achieved with some implementation of Flexbox or Grid.

Flexbox

Using Flexbox, you can create a flexible grid like so:

  display: flex;<br>  flex-wrap: wrap;<br>  justify-content: space-around;<br>  align-content: start;<br>}</p><p>.square {<br>  flex-grow: 1;<br>  max-width: 200px;<br>  background-color: #f1f1f1;<br>  margin: 10px;<br>  padding: 20px;<br>  text-align: center;<br>}</p><p>@media (max-width: 768px) {<br>  .square {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">max-width: 100px;

Copy after login

}
}

  <div class="square">Square 1</div><br>  <div>  <div class="square">Square 3</div><br></div>

Grid

Alternatively, you can use the Grid layout for more control over the grid's structure:

  display: grid;<br>  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); // defines the number of columns<br>  gap: 10px; // defines the gap between grid items<br>}</p>
<p>.square {<br>  background-color: #f1f1f1;<br>  text-align: center;<br>  padding: 20px;<br>}

  <div class="square">Square 1</div><br>  <div>  <div class="square">Square 3</div><br></div>

Both Flexbox and Grid offer varying methods of creating a grid of responsive squares. The choice between the two will depend on your specific requirements and preferences.

The above is the detailed content of How Can I Create a Responsive Grid of Squares Using Flexbox or Grid?. For more information, please follow other related articles on the PHP Chinese website!