css grid of squares with flexbox
edit 2022 Nowdays, aspect-ratio becomes widely avalaible. set a width or an height then for a square use the 1/1 ratio : aspect-ratio: 1 / 1 ;
ressources:
- tutorial https://css-tricks.com/almanac/properties/a/aspect-ratio/
- description https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
- browsers that understand it https://caniuse.com/?search=aspect-ratio
snippets becomes (note: no width nor height set, since we are in flex layout and flex-grow is set to 1 flex: 1 0 auto;
, doing the sizing job ):
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-around;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex: 1 0 auto;
aspect-ratio: 1 / 1 ;
}
/* Item can be any kind of box from here . flex/grid/block */
.flex-item {display:grid;align-items:center;justify-content:center;}
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
</body>
A grid layout with responsive squares
The padding-bottom
trick is the most used to accomplish that.
You can combine it with both Flexbox and CSS Grid, and since using percent for margin/padding gives inconsistent result for flex/grid items (on older browser versions, see edit note below), one can add an extra wrapper, or like here, using a pseudo, so the element with percent is not the flex/grid item.
Edit: Note, there's an update made to the specs., that now should give consistent result when used on flex/grid items. Be aware though, the issue still occurs on older versions.
Note, if you will add content to the content
element, it need to be position absolute to keep the square's aspect ratio.
Fiddle demo - Flexbox
Edit 2: In a comment I were asked how to have a centered text, so I added that in below snippet.
.square-container {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
display: flex; /* added for centered text */
justify-content: center; /* added for centered text */
align-items: center; /* added for centered text */
}
<div class="square-container">
<div class="square">
<div class="content">
<span>Some centered text</span>
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
Flexbox, responsive grid of square divs maintaining aspect ratio
To maintain your items aspect ratio, a very simple method is to use CSS Viewport units
I modified your pen to see how this units work: http://codepen.io/vladbicu/pen/wMBmOb
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
max-width: 960px;
width: 80%;
}
.container__item {
align-content: center;
border: 1px solid #333;
display: flex;
flex-basis: 1;
font-size: 3em;
justify-content: center;
margin-bottom: 1em;
// maintain aspect ratio
width: 30vw;
height: 30vw;
}
Hope it helps.
Flexbox 5x5 grid?
Flexbox is a layout technique meant to help to create responsive webdesign where the available space (browser width and height) is used best.
You don't need flexbox to achieve this. You might as well do it with inline-block
or floats. But you can use flexbox if you really want.
If you want something to be an exact width, give it an exact width. If you only want to have 5 Elements in one row, you need to limit the available space to 5 times the element width.
#grid {
display: flex;
flex-wrap: wrap;
width: 250px;
}
.grid-item {
width: 50px;
height: 50px;
overflow: hidden;
}
See it working here:
https://codepen.io/SirNovi/pen/WNOZoQw
Grid of responsive squares
New solution (2022)
CSS has changed since this aswer was written. We now have several properties that can drasticaly simplify code for a square grid :
- The grid property to handle the grid layout (MDN reference)
- The aspect ratio property to handle the square aspect ratio of each grid item (MDN reference)
- The object-fit property to handle image centering and wether they should cover the square or not (MDN reference)
Here is an example :
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2%;
}
.square {
aspect-ratio: 1/ 1;
display: flex;
align-items: center;
padding: 5%;
background-color: #1E1E1E;
color: #fff;
}
.square img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.square.fullImg {
padding: 0;
}
.square.fullImg img {
object-fit: cover;
}
<div class="grid">
<div class="square">
<ul>This demo shows you can center multiple types of content :
<li>Text</li>
<li>Images</li>
<li>Lists</li>
<li>... (you can also do it with forms)</li>
</ul>
</div>
<div class="square">98%</div>
<div class="square">3.9/5</div>
<div class="square"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
<div class="square"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
<div class="square"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
<div class="square fullImg"><img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" /></div>
<div class="square fullImg"><img class="rs" src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" /></div>
<div class="square fullImg"><img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" /></div>
</div>
Related Topics
Z-Index with Before Pseudo-Element
Sub-Pixels Calculated and Rendered Differently Among Browsers
Prevent Flex Item from Exceeding Parent Height and Make Scroll Bar Work
What Are the Differences Between Flex-Grow and Width
@Font-Face Eot Not Loading Over Https
Css Page-Break Not Working in All Browsers
Does CSS Hover Work on Mobile Devices
Difference Between Px, Em and Ex
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag
CSS Selector to Match an Element Without Attribute X
Css: 100% Width or Height While Keeping Aspect Ratio
How to Override the Properties of a CSS Class Using Another CSS Class
Css: Center Block, But Align Contents to the Left
How to Get the Scroll Bar with CSS Overflow on iOS
100Vw Causing Horizontal Overflow, But Only If More Than One