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>
Square CSS grid with square images?
You could create a "hidden" cell with a pseudo element (width:0px; height: 0px; padding-bottom: 100%;), overlap it with the real first cell and set all cells to the same height with grid-auto-rows: 1fr; and make the images absolutely positioned.
More in this article: https://medium.com/cloudaper/how-to-create-a-flexible-square-grid-with-css-grid-layout-ea48baf038f3
.grid::before {
content: '';
width: 0;
padding-bottom: 100%;
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.grid > *:first-child {
grid-row: 1 / 1;
grid-column: 1 / 1;
}
.item {
overflow: hidden;
position: relative;
background-color: red;
width: 100%;
/* padding-bottom: 100%; */
/* height: 0; */
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
min-width: 100%;
min-height: 100%;
}
create a css grid with n*n squares
Use a single grid for all items, and let the grid decide the dimensions of rows & columns:
.grid { display: grid; grid-template-columns: repeat(8, 12vmax); grid-template-rows: repeat(8, 12vmax); height: 100vh;}
.grid > .playable, .grid > .empty { border: 3px yellow solid;}
.playable { background-color: black;}
.empty { background-color: red;}
body { margin: 0;}
<div class="grid"> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div> <div class="playable"></div> <div class="empty"></div></div>
Centering squares in CSS Grid
grid-template-columns
Instead of this:
grid-template-columns: 1fr 1fr 1fr 1fr
Use this:
grid-template-columns: 1fr auto auto 1fr
.grid { display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-rows: 1fr 1fr; grid-gap: 20px;}
.idaho { grid-column: 2/3; grid-row: 1/2; height: 300px; width: 300px; background-color: gray;}
.utah { grid-column: 3/4; grid-row: 1/2; height: 300px; width: 300px; background-color: gray;}
.nevada { grid-column: 2/3; grid-row: 2/3; height: 300px; width: 300px; background-color: gray;}
.arizona { grid-column: 3/4; grid-row: 2/3; height: 300px; width: 300px; background-color: gray;}
<div class="grid"> <div class="idaho"> <h2>Idaho</h2> </div>
<div class="utah"> <h2>Utah</h2> </div>
<div class="nevada"> <h2>Nevada</h2> </div>
<div class="arizona"> <h2>Arizona</h2> </div>
</div>
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
Another: Force Chrome to Fully Buffer Mp4 Video
Limit Number of Characters Allowed in Form Input Text Field
What Characters Are Valid in a Url
Download Attribute on a Tag Not Working in Ie
How to Use a Carriage Return in a HTML Tooltip
Can an Option in a Select Tag Carry Multiple Values
How to Use Colspan and Rowspan in HTML Tables
Grid Properties Not Working on Elements Inside Grid Container
How to Avoid Joining All Text from Nodes When Scraping
Angular2 - Input Field to Accept Only Numbers
Css: Control Space Between Bullet and ≪Li≫
How to Display Just a Portion of an Image in Html/Css
Why Can't I Center With Margin: 0 Auto
How to Use Google Chrome 11'S Upload Folder Feature in My Own Code
How to Remove the Arrow from a Select Element in Firefox
Using ≪Style≫ Tags in the ≪Body≫ With Other Html
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)