Home > Web Front-end > CSS Tutorial > How Can I Create a Responsive Grid of Squares Using Flexbox or Grid?

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

Susan Sarandon
Release: 2024-12-25 13:15:09
Original
353 people have browsed it

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template