Flexible layout of perfectly square elements

Question

Flexible layout of perfectly square elements

I am currently working on creating a responsive grid layout consisting of squares that are positioned absolutely within their parent element. The goal is to ensure that when the page is resized, the squares scale proportionally with their parent container without shifting between lines.

For example, let's say I have a 3x3 grid of squares:

----------------
| A  | B  | C  |
----------------
| D  | E  | F  |
----------------
| G  | H  | I  |
----------------

The challenge is to make the entire grid resize fluidly while maintaining the dimensions of each square inside it.

I've attempted a few solutions, but I've encountered difficulties especially with adjusting the heights.

If anyone has any suggestions or ideas on how to achieve this effectively, I would greatly appreciate your input!

Thank you, John

javascript html css

Answer 1

Answer №1

Perhaps this solution will work for you:

Here is a fiddle link you can use to reference: http://jsfiddle.net/Preben/dkeccbwo/

If you plan on including text or images as content, the sample provided may need further customization to suit your preferences and needs:

<div class="myrow">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<div class="myrow">
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

<div class="myrow">
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

CSS:

.myrow {width:100%;border:1px dashed grey; margin-bottom:10px;display:table;}
.box {width:29%;min-height:80px;float:left;margin:2%;background-color:#cecece;}

In each div.box element, you have the option to insert square images that will automatically scale down while maintaining their aspect ratio.

Alternatively, you might consider using tables (in certain cases, tables can still be useful). For example, if you are already using Bootstrap CSS, you can explore Bootstrap tables: http://getbootstrap.com/css/#tables

Answer 2

Perhaps this solution will work for you:

Here is a fiddle link you can use to reference: http://jsfiddle.net/Preben/dkeccbwo/

If you plan on including text or images as content, the sample provided may need further customization to suit your preferences and needs:

<div class="myrow">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<div class="myrow">
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

<div class="myrow">
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

CSS:

.myrow {width:100%;border:1px dashed grey; margin-bottom:10px;display:table;}
.box {width:29%;min-height:80px;float:left;margin:2%;background-color:#cecece;}

In each div.box element, you have the option to insert square images that will automatically scale down while maintaining their aspect ratio.

Alternatively, you might consider using tables (in certain cases, tables can still be useful). For example, if you are already using Bootstrap CSS, you can explore Bootstrap tables: http://getbootstrap.com/css/#tables

Answer 3

Answer №2

function adjustSize(){
  var width = $('.box:first').width();
  $('.box').css('height', width);
}
$(function(){
  adjustSize();
  $(window).resize(adjustSize);
});

.container{
  max-width: 800px;
  font-size: 0;
}
.box{
  display: inline-block;
  font-size: 16px;
  width: 25%;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
}
.box::after{
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="box">a</div>
  <div class="box">b</div>
  <div class="box">c</div>
  <div class="box">d</div>
  <div class="box">e</div>
  <div class="box">f</div>
  <div class="box">g</div>
  <div class="box">h</div>
  <div class="box">i</div>
</div>

Answer 4

function adjustSize(){
  var width = $('.box:first').width();
  $('.box').css('height', width);
}
$(function(){
  adjustSize();
  $(window).resize(adjustSize);
});

.container{
  max-width: 800px;
  font-size: 0;
}
.box{
  display: inline-block;
  font-size: 16px;
  width: 25%;
  text-align: center;
  border: 1px solid #333;
  box-sizing: border-box;
}
.box::after{
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="box">a</div>
  <div class="box">b</div>
  <div class="box">c</div>
  <div class="box">d</div>
  <div class="box">e</div>
  <div class="box">f</div>
  <div class="box">g</div>
  <div class="box">h</div>
  <div class="box">i</div>
</div>

Flexible layout of perfectly square elements

Answer №1

Answer №2

Similar questions

Choosing a CSS selector for a class that does not have a specific ID

Is it more efficient to declare a variable or directly return the variable from the Element's getText() promise in Protractor?

Utilize the class names to assign a distinctive color using mixins in SCSS

Attempting to modify information in vue.js

Twig template delivers HTML entities

Is there a way to reset the canvas with just a click of a button?

Dynamic routes in NextJS automatically append a .txt extension to the end of the URL

Attempting to program a bot to navigate in a random pattern across a two-dimensional xz plane using Threejs

Animation of CSS height when image/icon is hovered over

What is the best method for designing a filtering menu with a "Narrow By" option?

Steering clear of ng-include while still maintaining versatility in displaying sub-templates

Encountering issues with basic login functionality using Node.js and MongoDB - receiving a "Cannot

Need help with JQuery mouseOver fading in twice when you only want it to fade in

Guide on creating line breaks within a list in a Python email

Styling the right button of the split button in jQuery Mobile version 1.4.0 using CSS

Enhancing your grasp on CSS grid columns - mastering columns through float usage

What strategies can be implemented to improve the total blocking time in Vue for optimal performance

Learn the trick to making specific words appear bold in Select2 by changing the font style

Trouble With OnClick and On/Off Class Script Functionality in Chrome and Internet Explorer

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?