Using a grid layout with columns that dynamically adjust in size between a set maximum and minimum pixel size

Question

Using a grid layout with columns that dynamically adjust in size between a set maximum and minimum pixel size

How can I create grid columns that have a minimum width of 200px and a maximum width of 300px? Currently, when using the code

grid-template-columns: repeat(auto-fit, minmax(200px, 300px));

, the columns always render at 300px.

To make columns shrink proportionally, I tried using: 
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

However, this caused the columns to become too large. After reviewing the documentation for minmax(), I couldn't find a suitable example to address this issue.

Is there a workaround solution available for this problem? See The Fiddle for reference.

The Answer

An important aspect of resolving this issue is modifying the code to: minmax(300px, auto)); and adding box-sizing: border-box;.

Failure to include these adjustments may result in the grid not being properly centered when collapsing into one column layout. Thank you!

css grid

Answer 1

Answer №1

To prevent elements from growing larger than 300px, you can use either minmax(200px,1fr) or minmax(200px,auto) along with setting max-width on the child elements.

Here are some examples:

* {
  box-sizing: border-box
}

body {
  padding: 20px;
  font-family: Helvetica;
}
/* sizing */
.wrapper {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.wrapper.bis {
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

.box {
  max-width: 300px
}
/* --- */
.wrapper {
  display: grid;
  grid-gap: 10px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
  max-width: 300px
}

.box {
  /* Demo see average width by chunks of 50px bg-gradient-color */
  background-image: repeating-linear-gradient(to right, red 0 50px, green 50px 100px);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto 5px;
}

<div class="wrapper">
  <div class="box a">A - 200px,1FR</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
<hr>
<div class="wrapper bis">
  <div class="box a">A - 200px,AUTO</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Answer 2

To prevent elements from growing larger than 300px, you can use either minmax(200px,1fr) or minmax(200px,auto) along with setting max-width on the child elements.

Here are some examples:

* {
  box-sizing: border-box
}

body {
  padding: 20px;
  font-family: Helvetica;
}
/* sizing */
.wrapper {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.wrapper.bis {
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

.box {
  max-width: 300px
}
/* --- */
.wrapper {
  display: grid;
  grid-gap: 10px;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
  max-width: 300px
}

.box {
  /* Demo see average width by chunks of 50px bg-gradient-color */
  background-image: repeating-linear-gradient(to right, red 0 50px, green 50px 100px);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: auto 5px;
}

<div class="wrapper">
  <div class="box a">A - 200px,1FR</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
<hr>
<div class="wrapper bis">
  <div class="box a">A - 200px,AUTO</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Answer 3

Answer №2

After testing out your code and examining the elements in my browser, I am confident that everything is correct. Your utilization of padding within each box seems to be spot on.

Here is the result when using the maximum value: https://i.sstatic.net/9e7ka.png

And this is what it looks like with the minimum value: https://i.sstatic.net/jAwqt.png

Answer 4

After testing out your code and examining the elements in my browser, I am confident that everything is correct. Your utilization of padding within each box seems to be spot on.

Here is the result when using the maximum value: https://i.sstatic.net/9e7ka.png

And this is what it looks like with the minimum value: https://i.sstatic.net/jAwqt.png

Using a grid layout with columns that dynamically adjust in size between a set maximum and minimum pixel size

Answer №1

Answer №2

Similar questions

Issue of Modal not hiding persists despite attempted solutions using JS, jQuery, and CSS

Tips for adding an icon to an image using PHP and CSS

Customizing the width of the JQuery $ui.progressbar by overriding its properties

I am encountering an issue with the jquery.min.js file not loading when I try to utilize the Google CDN for jQuery

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Is it possible for an ul to be displayed beneath a white section within an li

A guide to resizing images to fit the page in React using Bootstrap

Altering the source of an HTML image

Tips for placing the html <a> tag above an image and centered

Navigating with just a single instance of identical pseudo elements

Ways to prevent the navbar from disappearing when the Chrome browser is resized

Page will break once it is filled vertically

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

Experiencing problems with z-index and the usage of :before and :after pseudo elements on Internet Explorer

Issue with cdk-virtual-scroll-viewport: Scroll function malfunctioning when using navigation up/down button

Looking to achieve a scroll effect with mix-blend-mode using JavaScript?

Image overlay on a hovering background

HTML animation effect on subpage with a URL modification [LATEST UPDATE]

Issue with Font-Awesome icons failing to display properly when using the BootstrapCDN