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

The renderToString function in Material UI's sx property doesn't seem to have

An issue has been discovered where IE8 is unable to print an image within the :before pseudo

Creating dynamic and fluid motion with Bezier curves on canvas

Assigning a value to an input field using jQuery

What is the complete pathway in CSS?

Display 3 buttons only on screens smaller than 576 pixels, and hide them on wider screens

Leverage Bootstrap 4 for achieving flexible layouts and centering content with two elements using flex and justify-content

Should the text underneath the image be placed above the rest of the images?

Ensuring form labels are properly aligned with input-group-prepend in Bootstrap

Is there a way to lower just one border?

How can I retrieve the position of a div or an image within a div (specifically the top and left coordinates) and incorporate these values into CSS?

What's the best way to use Flexbox to center a component with a "fixed width"?

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

Ways to position Bootstrap 4 navbar elements at the bottom

The angular content is not scrolling

Combining Date and Time in Javascript: A Guide

Creating a dynamic visual effect with image overlap in the Sencha Touch carousel

What could be causing my input to not activate my function?

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

Maintain consistent theme across various pages using javascript