Discovering the solution to creating a responsive element grid using only CSS: (8-1) - (4-2) - (2-4) - (1-8)

Question

Discovering the solution to creating a responsive element grid using only CSS: (8-1) - (4-2) - (2-4) - (1-8)

My responsive website includes the following HTML code:

            <div id="fpma">
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
                <span class="fpm"></span>
            </div>

The width of #fpma container varies based on the screen size, while the elements within .fpm have fixed widths. The current CSS looks like this:

#fpma {
    text-align: right;
    width: 100%;
}

.fpm {
    width: 48px;
    height: 33px;
    display: inline-block;
    margin: 4px;
    background:url('images/bar.png') center center no-repeat;
}

I am seeking a reusable solution to automatically rearrange the items as the parent container's width decreases in the following manner:

1 row - 8 elements

2 rows - 4 elements

4 rows - 2 elements

8 rows - 1 element

I would prefer a solution that does not rely on media queries and allows for flexibility without requiring additional wrappers in the HTML structure.

If utilizing CSS3 features like nth-child, :before/:after, flexbox, etc., is necessary, it is welcomed. However, any solution should aim to avoid dependency on media queries due to their fixed max-width/min-width constraints. If providing a media query alternative along with reasons for its necessity, that would also be acceptable. I have experimented with various approaches but have yet to achieve the desired result.

If needed, changing the display form of the elements is permissible.

html css

Answer 1

Answer №1

To achieve this, you need to utilize @media queries in conjunction with setting fixed sizes for elements within the .fpm class. This will allow you to determine when the @media query should trigger a layout change for 2 rows, 4 rows, or 8 rows. I have provided an example for 2 rows using the same logic that can be applied to 4 and 8 rows as well.

#fpma {
    text-align: right;
    width: 100%;
    box-sizing:border-box;
    border:1px solid red;
}

.fpm {
    width: 48px;
    height: 33px;
    display: inline-block;
    box-sizing:border-box;
    border:1px solid #000;
    margin: 4px;
    background:url('images/bar.png') center center no-repeat;
}
@media screen and (max-width:408px){
  #fpma:before, #fpma:after {
    content: "";
    display: table;
  }
  #fpma:after {
    clear: both;
  } 
  #fpma {
    *zoom: 1;
  }
  .fpm {
    float: right;
  }
  
  .fpm:nth-of-type(5n) {
    display: inline;
    clear: right;
    float: right;
  }
}

<div id="fpma">
                <span class="fpm">1</span>
                <span class="fpm">2</span>
                <span class="fpm">3</span>
                <span class="fpm">4</span>
                <span class="fpm">5</span>
                <span class="fpm">6</span>
                <span class="fpm">7</span>
                <span class="fpm">8</span>
            </div>

https://jsfiddle.net/vm0opbab/

I believe I have implemented the solution correctly.

Answer 2

To achieve this, you need to utilize @media queries in conjunction with setting fixed sizes for elements within the .fpm class. This will allow you to determine when the @media query should trigger a layout change for 2 rows, 4 rows, or 8 rows. I have provided an example for 2 rows using the same logic that can be applied to 4 and 8 rows as well.

#fpma {
    text-align: right;
    width: 100%;
    box-sizing:border-box;
    border:1px solid red;
}

.fpm {
    width: 48px;
    height: 33px;
    display: inline-block;
    box-sizing:border-box;
    border:1px solid #000;
    margin: 4px;
    background:url('images/bar.png') center center no-repeat;
}
@media screen and (max-width:408px){
  #fpma:before, #fpma:after {
    content: "";
    display: table;
  }
  #fpma:after {
    clear: both;
  } 
  #fpma {
    *zoom: 1;
  }
  .fpm {
    float: right;
  }
  
  .fpm:nth-of-type(5n) {
    display: inline;
    clear: right;
    float: right;
  }
}

<div id="fpma">
                <span class="fpm">1</span>
                <span class="fpm">2</span>
                <span class="fpm">3</span>
                <span class="fpm">4</span>
                <span class="fpm">5</span>
                <span class="fpm">6</span>
                <span class="fpm">7</span>
                <span class="fpm">8</span>
            </div>

https://jsfiddle.net/vm0opbab/

I believe I have implemented the solution correctly.

Answer 3

Answer №2

To achieve this layout, you will need to utilize media queries or scripting. Here is a basic example using media queries:

Check out the demo on Fiddle

Here is a snippet of code:

#fpma {
  width: 100%;
}
.fpm {
  width: 48px;
  height: 33px;
  float: right;
  margin: 4px;
  background:url('http://placehold.it/100') center center no-repeat;
}

@media screen and (max-width: 450px) {
  .fpm:nth-of-type(5) {
    clear: right;
  }
}
@media screen and (max-width: 225px) {
  .fpm:nth-of-type(3),
  .fpm:nth-of-type(7) {
    clear: right;
  }
}
@media screen and (max-width: 112px) {
  .fpm {
    clear: right;
  }
}

<div id="fpma">
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
</div>

Answer 4

To achieve this layout, you will need to utilize media queries or scripting. Here is a basic example using media queries:

Check out the demo on Fiddle

Here is a snippet of code:

#fpma {
  width: 100%;
}
.fpm {
  width: 48px;
  height: 33px;
  float: right;
  margin: 4px;
  background:url('http://placehold.it/100') center center no-repeat;
}

@media screen and (max-width: 450px) {
  .fpm:nth-of-type(5) {
    clear: right;
  }
}
@media screen and (max-width: 225px) {
  .fpm:nth-of-type(3),
  .fpm:nth-of-type(7) {
    clear: right;
  }
}
@media screen and (max-width: 112px) {
  .fpm {
    clear: right;
  }
}

<div id="fpma">
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
  <span class="fpm"></span>
</div>

Answer 5

Answer №3

I have managed to find a solution for 3 out of the 4 cases.

By utilizing flexbox properties and adjusting margins, I was able to achieve the desired effect.

#container {
  width: 581px;
  height: 450px;
  border: solid 1px red;
  display: flex;
  flex-wrap: wrap;
  animation: widen 6s infinite;
}

.box {
  width: 48px;
  height: 50px;
  border: solid 1px blue;
  flex-shrink: 0;
}

.sep1 {
  margin-right: 150px;
}

.sep1 + div {
  margin-left: -150px;
}

.sep2 {
  margin-right: 50px;
}

.sep2 + div {
  margin-left: -50px;
}

@keyframes widen {
  from {width: 110px;}
  to {width: 450px;}
}

<div id="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box sep2">C</div>
    <div class="box">D</div>
    <div class="box sep1">A</div>
    <div class="box">B</div>
    <div class="box sep2">C</div>
    <div class="box">D</div>
</div>

However, the requirement for rows containing only 1 element remains unresolved...

Perhaps someone else can offer a solution to this final issue?

Answer 6

I have managed to find a solution for 3 out of the 4 cases.

By utilizing flexbox properties and adjusting margins, I was able to achieve the desired effect.

#container {
  width: 581px;
  height: 450px;
  border: solid 1px red;
  display: flex;
  flex-wrap: wrap;
  animation: widen 6s infinite;
}

.box {
  width: 48px;
  height: 50px;
  border: solid 1px blue;
  flex-shrink: 0;
}

.sep1 {
  margin-right: 150px;
}

.sep1 + div {
  margin-left: -150px;
}

.sep2 {
  margin-right: 50px;
}

.sep2 + div {
  margin-left: -50px;
}

@keyframes widen {
  from {width: 110px;}
  to {width: 450px;}
}

<div id="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box sep2">C</div>
    <div class="box">D</div>
    <div class="box sep1">A</div>
    <div class="box">B</div>
    <div class="box sep2">C</div>
    <div class="box">D</div>
</div>

However, the requirement for rows containing only 1 element remains unresolved...

Perhaps someone else can offer a solution to this final issue?

Discovering the solution to creating a responsive element grid using only CSS: (8-1) - (4-2) - (2-4) - (1-8)

Answer №1

Answer №2

Answer №3

Similar questions

What is preventing this Node JS code from successfully serving a static PNG file?

Conceal the horizontal scrollbar when the navigation menu is minimized

User's information will only be updated once the page is refreshed

Is there a way to customize my visual studio code to automatically insert an indented space between curly brackets in CSS when I press enter?

Issues with concealing the side menu bar in Vue.js

When a button is clicked, unleash the magic of music using JavaScript

My customized portfolio incorporates Bootstrap 4 and integrates a modal for collecting feedback. I am looking for a way to gather visitor feedback directly into a Google Sheet without relying on Google Forms

What is the best way to detect input events from the Stripe cardElement to determine if a card is invalid and then proceed to disable the button?

How can I retrieve a list of downloads utilizing the Chrome.downloads api?

Delete auto-generated list using handlebars JS

The div on the right side is constantly adjusting its height, while the div on the left remains at a fixed height. They need to be

Unexpected Placement of Bootstrap 4 Table Spinner in Chrome and Internet Explorer

Altering an element's visibility from 'none' will trigger its animation to play once again

Responsive Alignment of Slanted Edges using CSS

Creating submenus that cause the navigation menu to drop down

Collection of clickable images that lead to creatively designed individual pages

Enhance your website with a dynamic jQuery gallery featuring stunning zoom-in

Encountered SyntaxError: An unexpected token has been found while integrating leaflet with flask

Having trouble with the jQuery each function's functionality

Am I utilizing the htmlspecialchars function properly?