Column that adjusts to different screen sizes

Question

Column that adjusts to different screen sizes

In the realm of responsive web design, what methods are suggested to achieve the specified CSS display?

My main requirement is to have a maximum of three columns. The content should be divided evenly among these three columns.

I prefer using SCSS and welcome the use of Flexbox and CSS Grids. I would like to avoid Bootstrap, even though I know it has a grid system.

For screen widths less than 1000px:

A D G
B E H
C F

For screen widths less than 500px:

A E
B F
C G
D H

For screen widths less than 200px:

A
B
C
D
E
F
G
H

Here is a link to a codepen with some initial code. I am struggling to come up with a suitable solution for this layout.

https://codepen.io/basickarl/pen/NjgvNa

I was considering using CSS Grids, but I'm concerned that it may not provide the necessary flexibility as the items in the list will change.

html css

Answer 1

Answer №1

If you're unsure about what you're searching for, this solution may suit your needs.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  max-width: 1500px;
}

@media screen and (min-width: 1200px) {
  section {
    background: blue;
  }
  item {
    width: 20%;
  }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  section {
    background: pink;
  }
  item {
    width: 33.3333%;
  }
}

@media screen and (min-width: 400px) and (max-width: 800px) {
  section {
    background: yellow;
  }
  item {
    width: 50%;
  }
}

item {
  text-align: center;
  background: purple;
  margin: 1em 0em;
  align-self: flex-start;
}

<section>
  <item>One</item>
  <item>Two</item>
  <item>Three</item>
  <item>Four</item>
  <item>Five</item>
  <item>Six</item>
  <item>Seven</item>
  <item>Eight</item>
</section>

Additionally, for a n number of columns, you can use the following code:

item {
  width: calc(100%/n);
}

Answer 2

If you're unsure about what you're searching for, this solution may suit your needs.

section {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  max-width: 1500px;
}

@media screen and (min-width: 1200px) {
  section {
    background: blue;
  }
  item {
    width: 20%;
  }
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  section {
    background: pink;
  }
  item {
    width: 33.3333%;
  }
}

@media screen and (min-width: 400px) and (max-width: 800px) {
  section {
    background: yellow;
  }
  item {
    width: 50%;
  }
}

item {
  text-align: center;
  background: purple;
  margin: 1em 0em;
  align-self: flex-start;
}

<section>
  <item>One</item>
  <item>Two</item>
  <item>Three</item>
  <item>Four</item>
  <item>Five</item>
  <item>Six</item>
  <item>Seven</item>
  <item>Eight</item>
</section>

Additionally, for a n number of columns, you can use the following code:

item {
  width: calc(100%/n);
}

Answer 3

Answer №2

In order to accomplish my goal, I have found that creating two distinct columns is the most effective approach. The first column would contain letters A to H and be displayed initially, while the second column with the same letters would be hidden. Then, after a certain event or trigger occurs, they would switch places, showing the previously hidden column and hiding the initially visible one.

Answer 4

In order to accomplish my goal, I have found that creating two distinct columns is the most effective approach. The first column would contain letters A to H and be displayed initially, while the second column with the same letters would be hidden. Then, after a certain event or trigger occurs, they would switch places, showing the previously hidden column and hiding the initially visible one.

Column that adjusts to different screen sizes

Answer №1

Answer №2

Similar questions

Is it possible to relocate an iframe outside the body of a post in Blogger?

How can I use Angular to toggle a submenu based on a data-target attribute when clicked?

Encountering a predicament when attempting to retrieve an image from an alternative

The content on the page is not visible when viewing on an Android device in

Ensuring the text is positioned centrally and at the bottom of a table cell

Does the rendered ID of an ASPX control always appear the same in the source HTML code?

Tips for expanding an input to fit the width of a div without altering the dimensions of a preceding span element

What is the best way to display HTML content in a Jupyter Notebook?

Changing the CSS property of a single table cell's innerHTML

Modifying the URL of an image based on screen size with the @media property

Necessary Selection from Dropdown

unable to execute PHP code

The submit button click does not trigger the execution of ajax code

The functionality of the custom file upload button is experiencing issues on Microsoft Edge

Excessive width of the lower border

Effective ways to position images within a card alongside a changing title

CSS drop down menu malfunctioning

The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Creating a sleek CSS drop-down navigation menu

The Mat-slide-toggle resembles a typical toggle switch, blending the functionalities of