Array of adaptable diamonds

How can I design a layout with responsive squares that feature both vertically and horizontally centered content? Below is an example of what I am trying to achieve...

htmlcssresponsive-designgrid-layoutaspect-ratio

Answer №1

Latest solution (2022)

CSS has evolved since the creation of this response. There are now multiple properties available that can significantly simplify the code for a square grid :

  • The grid property for managing the grid layout (MDN reference)
  • The aspect ratio property to handle the aspect ratio of each grid item, ensuring it remains square (MDN reference)
  • The object-fit property for controlling image centering and coverage within the squares (MDN reference)

Here is an example to illustrate how these properties can be used :

.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>
    </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>

Previous answer

The existing method still works, but CSS advancements have introduced new properties that enhance code simplicity and comprehension.

You can create a responsive grid of squares with vertically and horizontally centered content using solely CSS. The following step-by-step guide will demonstrate how to achieve this, along with two demos showcasing the possibilities:

http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/ http://jsfiddle.net/webtiki/MpXYr/3/embedded/result/

Now let's explore how to create these stylish responsive squares!

...

Answer №2

One option to create responsive squares is by using vw (view-width) units, adjusting the size based on the width of the screen.

Here's a simple example:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

Answer №3

The accepted solution is quite impressive, however achieving this layout can also be accomplished using the flexbox CSS property.

Below is a grid system designed with the Block Element Modifier (BEM) syntax that enables the display of 1 to 10 columns per row.

If the final row contains fewer items than specified (for instance, you opt for 5 cells per row but have 7 items), the remaining items will be centered horizontally. To adjust the horizontal alignment of these extra items, simply modify the justify-content property within the .square-grid class.

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Cell Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}


.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Cell Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}
<div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

Compatibility tested on Firefox and Chrome browsers.

Answer №4

With the aspect-ratio property, achieving a square ratio is now simple and convenient. Check out the details here.

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Creating 3 columns */
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* Establishing a square ratio */
  border: 1px solid;
  
  /* Centering content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}
<div class="container">
  <div> Insert content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div> Additional content <br>goes here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

Easily achieve a variable number of columns with the following setup:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
}

.container>* {
  aspect-ratio: 1 / 1; /* Creating a square ratio */
  border: 1px solid;
  
  /* Centering content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

img {
  max-width: 100%;
  display: block;
}
<div class="container">
  <div> Add some content here </div>
  <div><img src="https://picsum.photos/id/25/400/400"></div>
  <div>
    <h1>a title</h1>
  </div>
  <div> More content can be added <br>right here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
  <div> Even more content <br>over here</div>
  <div>
    <h2>another title</h2>
  </div>
  <div><img src="https://picsum.photos/id/104/400/400"></div>
</div>

Answer №5

This method is my go-to solution for creating responsive boxes with various aspect ratios:

HTML:

<div class="box ratio1_1">
  <div class="box-content">
            ... YOUR CONTENT HERE ...
  </div>
</div>

CSS:

.box-content {
  width: 100%; height: 100%;
  top: 0; right: 0; bottom: 0; left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*creates a square box*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }

Check out the demonstration on JSfiddle.net

Answer №6

If you need a speedy TailwindCSS solution, try this code snippet:

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
  <div class="aspect-[1/1] flex items-center">
    <div class="w-full h-full bg-purple-500"></div>
  </div>
  <div class="aspect-[1/1] flex items-center">
    <div class="w-full h-full bg-orange-500"></div>
  </div>
  <div class="aspect-[1/1] flex items-center">
    <div class="w-full h-full bg-pink-500"></div>
  </div>
  <div class="aspect-[1/1] flex items-center">
    <div class="w-full h-full bg-teal-500"></div>
  </div>
</div>

This code will display four squares in both rows and columns of two on larger screens, but show as a single column with four rows on smaller devices.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to allocate space between a parent container and a child view group

Is there a way to build a layout with an image that covers 90% of the screen height, leaving the last 10% for three text views arranged horizontally without explicitly setting the height of the image? I have tried using layout_weight without success. Her ...

javaandroidcss

Does the order property in flex have a specific starting and ending point?

I am curious to know if there are specific start or end numbers for ordering elements within a flex container. For instance: .firstOrder { order: <First-Item> } Why do I ask? Well, I am in the process of developing a CSS framework and I would l ...

cssflexbox

Tips for aligning elements in a row side by side in Internet Explorer

In a single row, I have two table data elements. TD1 contains two texts (txt1 and txt2). It is required that txt2 in TD1 aligns with TD2. Below is the code snippet for reference: <tr> <td width="220"> <span class="b">TB ...

htmljsp

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

javascripthtmlcss

Creating an HTML Form Dropdown List that Redirects Users

As a budding web developer, I am in the process of creating a simple website. I have a query regarding how to extract a value from a drop-down list form in HTML, click the submit button, and get redirected to a new page based on the selection made. Specifi ...

htmlcss

Troubleshooting problem with Bootstrap media object in CSS

I am attempting to utilize Bootstrap to showcase media content (linked here: https://getbootstrap.com/docs/4.0/layout/media-object/). However, despite copying and pasting the code from the documentation, the output does not match the example on the website ...

htmlcssbootstrap-4

Thumbnail display issue in jQuery Galleria

After successfully setting up the Galleria Plugin, I found that the thumbnails for each picture were not generating. Here is my code: <div id="galleria"> <img title="Image title" src="images/1.jpg"> ...

phpjavascriptjqueryhtmlcss

Preventing a JavaScript function from executing multiple times

Having only recently started learning javascript and jquery, I encountered a problem where one of my functions kept executing itself when calling another function. Despite trying various solutions found here, the function either stopped executing altogethe ...

javascriptjqueryhtml

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

Guide on incorporating CSS into a JavaScript function

Currently, I am utilizing a jQuery monthly calendar where each day is represented by a cell. When I click on a cell, I can trigger an alert message. However, I also want to modify the background color of the specific cell that was clicked. Unfortunately, ...

javascriptjquerycss

Ways to customize bullet points?

Is there a way to customize the bullet points in HTML? All my bullet points are displaying as stars instead of the standard black circle for the main bullets and a hollow circle for the sub-bullets. I attempted to set the style using list-style-type:disc ...

htmlvbaoutlook

Who is the mastermind behind the prioritization of CSS3 cross browser compatibility?

Who is responsible for the prioritization of CSS3 cross browser support? For instance: .box_scale { -webkit-transform: scale(0.8); /* Chrome, Safari 3.1+ */ -moz-transform: scale(0.8); /* Firefox 3.5+ */ -ms-transform: scale(0.8); /* IE 9 ...

csscross-browser

Creating a dynamic div and populating it with data from various elements in separate xhtml files: a step-by-step guide

I am looking to dynamically add a div under the div tag with id "includedContent" in the code below. Additionally, I would like to modify the load method to accept an array of ids instead of a hardcoded Id(123) and display the data in the dynamically creat ...

javascriptjqueryhtml

Why is My JQuery Button Data Null?

I am facing an issue with a button where I want to pass the HTML object as a parameter to a JavaScript function. The objective is to print the data-hi attribute value from the element in the button. HTML BUTTON <button type = "button" onclick = "whoIs ...

javascriptjqueryhtmlcss

I am experiencing issues with the Bootstrap responsive menu not functioning correctly on my template

While working on this Bootstrap 3 template, I observed that the default responsive menu is not functioning properly when I resize my browser for testing. I have previous experience designing responsive templates that work well, but this particular templat ...

htmlcsstwitter-bootstrapresponsive-design

Functioning on JSFIDDLE, though facing issues on .html files

I'm baffled. The code snippet below functions perfectly on JSFIDDLE, but it's not working properly on my own webpage. The code is supposed to duplicate everything inside the DIV element. To see it in action, check out this link to the working JSF ...

javascripthtml

What is the best way to dynamically adjust the height of an iframe based on its changing content

My webpage contains an iframe that loads content dynamically, and I want to center it on the page based on its height. The issue I'm facing is that while my code works well for increasing content heights, it fails to recognize when the content size de ...

javascriptjqueryhtmlcsscss-position

Is there a way to determine the items that will be displayed on this page by clicking a link from a different page?

First Page: Whenever a link is clicked, it will redirect to the second page where only the relevant item will be displayed <ul class="portfolio-filters list-inline"> <li ><a href="page2.html/#webdesign-filter">Web ...

javascripthtmlcss-selectorsbootstrap-5

Guide to positioning a button and input within a Twig template using Bootstrap

I have a form in my view that includes a button and an input field with a label. Currently, the button is rendered at the same height as the label of the input field. How can I make sure the input and button are on the same line? This is the code snippet ...

htmlcsstwitter-bootstraptwig

Enhance your Angular material datepicker with additional content such as a close button

I'm currently working on customizing my Angular Material datepicker by adding a button. The goal is to have this button placed in the top right corner and enable it to close the datepicker when clicked. In addition, I also want to include extra conte ...

htmlangulartypescriptdatepickerangular-material