Grid system that is responsive, while also maintaining a fixed column width

Question

Grid system that is responsive, while also maintaining a fixed column width

My problem seems simple, but I can't find an easy solution.

What I need is to create a grid with fixed widths and a fixed distance between each column.

Each column should be 400px wide, and as the browser window is resized, the grid should adjust by reducing the number of columns while maintaining their width and spacing.

The content within the grid should flow seamlessly over all the columns.

I've explored open-source grid systems like Bootstrap and Skeleton, but they all use percentage widths which change with resizing, which is not what I need.

Is there a simpler way to achieve this?

Edit/Clarification:

Here's how it currently looks without columns: http://jsfiddle.net/xjrt8qrm/16/show/

<div>See the fiddle</div>

I want to have x columns, where x is the maximum number of 400px columns based on the user's resolution. The content should flow like a newspaper from top to bottom in a single row of columns.

This is how I imagine it looking on a PC: https://i.sstatic.net/ycF2m.png. (Please ignore the text/comments in the image).

html css

Answer 1

Answer №1

Understanding the concept is quite straightforward. The container plays the vital role of holding the contents together. By applying a float left property, the contents will align from left to right. As the container reaches its width limit, the contents will gracefully drop to a new row, one by one. To prevent the float from affecting other elements nearby, the clear div can be utilized. Of course, adjusting padding, margins, and other styles will be necessary according to your design preferences.

For a newspaper-style vertical layout, a helpful solution can be found in this resource.

If the requirement is to hide columns that exceed the available space, techniques like media queries can be employed along with overflow:none property.

Below is a simple code snippet that demonstrates the implementation:

HTML:

<div class="container">
      <div class="fourhundred">
          Div 1
      </div>
      <div class="fourhundred">
          Div 2
      </div>
      <div class="fourhundred">
          Div 3
      </div>
      <div class="clear"></div>
    </div>

CSS:

.fourhundred { 
  width: 400px;
  margin: 10px;
  float: left;
}
.clear { clear: left; }
.container { width: 100%; }

Answer 2

Understanding the concept is quite straightforward. The container plays the vital role of holding the contents together. By applying a float left property, the contents will align from left to right. As the container reaches its width limit, the contents will gracefully drop to a new row, one by one. To prevent the float from affecting other elements nearby, the clear div can be utilized. Of course, adjusting padding, margins, and other styles will be necessary according to your design preferences.

For a newspaper-style vertical layout, a helpful solution can be found in this resource.

If the requirement is to hide columns that exceed the available space, techniques like media queries can be employed along with overflow:none property.

Below is a simple code snippet that demonstrates the implementation:

HTML:

<div class="container">
      <div class="fourhundred">
          Div 1
      </div>
      <div class="fourhundred">
          Div 2
      </div>
      <div class="fourhundred">
          Div 3
      </div>
      <div class="clear"></div>
    </div>

CSS:

.fourhundred { 
  width: 400px;
  margin: 10px;
  float: left;
}
.clear { clear: left; }
.container { width: 100%; }

Answer 3

Answer №2

The reason behind the creation of flexbox is to provide more flexibility in laying out elements. To implement flexbox in your design, make sure to include the following code in your container:

.container {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
}

You can also refer to this example on Fiddle

Answer 4

The reason behind the creation of flexbox is to provide more flexibility in laying out elements. To implement flexbox in your design, make sure to include the following code in your container:

.container {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
}

You can also refer to this example on Fiddle

Answer 5

Answer №3

To divide the whole width into 3 equal parts, you can simply use the CSS property width: calc(100% / 3);. Feel free to replace the value 3 with any number you prefer.

For a demonstration, check out the Fiddle Demo

<div id = "main">
    <div id ="sub">One
    </div>
    <div id ="sub">Two
    </div>
    <div id ="sub">Three
    </div>
</div>

Here's the CSS part:

#main{
    border: 2px solid black;
    height: 100px;
    width: 100%;
    position: relative;
    display: flex;
}
#sub{
    border: 1px solid red;
    width: calc(100% / 3);
    height: calc(100% - 40px);
    padding: 10px;
    margin: 5px;   
    display: inline-block;
}

Answer 6

To divide the whole width into 3 equal parts, you can simply use the CSS property width: calc(100% / 3);. Feel free to replace the value 3 with any number you prefer.

For a demonstration, check out the Fiddle Demo

<div id = "main">
    <div id ="sub">One
    </div>
    <div id ="sub">Two
    </div>
    <div id ="sub">Three
    </div>
</div>

Here's the CSS part:

#main{
    border: 2px solid black;
    height: 100px;
    width: 100%;
    position: relative;
    display: flex;
}
#sub{
    border: 1px solid red;
    width: calc(100% / 3);
    height: calc(100% - 40px);
    padding: 10px;
    margin: 5px;   
    display: inline-block;
}

Grid system that is responsive, while also maintaining a fixed column width

Answer №1

Answer №2

Answer №3

Similar questions

The functionality of `config.assets.debug = true` fails to

Tips for implementing a CSS class on a select dropdown in multiple web pages

Using CSS to align the position of a div with the last word position of an h4 element

Tips for centering a button within the body of a webpage

Adjusting Font Size for Buttons on Mobile Devices in HTML

Ways to ensure even spacing in a responsive header design

Is there a way to display a bootstrap modal when the page is refreshed?

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

Having trouble sending data from the controller to the view in Laravel 8

Issue with applying CSS properties of 'top' and 'left' to a dynamically created div using

Combining mouse interactions with animated bar transitions

Tips for refreshing the default style of Material UI select

React JS makes it simple to create user-friendly cards that are optimized

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Extracting data from a tiered website within a specialized niche

Scroll the div that is dynamically filled without affecting the scrolling of the main page

Aligning a div with absolute positioning vertically

How can I enhance a JavaScript Calendar with more features?

What is preventing Facebook from merging its CSS/JS files together?

Why does the Element.style.left property keep rejecting my input value?