Excessive number of grid items causing page to exceed capacity with auto-fit feature

I am currently using a grid with an auto-fit feature. Everything is working smoothly, but when the screen size shrinks to less than 350 pixels, it starts to overflow. How can I ensure that it stays at least 350px wide if possible and then shrinks accordingly?

 .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1rem;
      }
      .item {
        background-color: crimson;
        height: 200px;
        border-radius: 2rem;
      }

<div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
htmlcss

Answer №1

If you want to include another property within the minmax() function, try using min():

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 1rem;
}

.item {
  background-color: crimson;
  height: 200px;
  border-radius: 2rem;
}
<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer №2

Here is the solution you are seeking:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: 1rem;
}

The original minimum width was non-responsive, so I have addressed this by incorporating a value of 100% within the minmax function utilizing min().

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Content linked to an uneditable text box that does not appear in the HTML code

I recently encountered a situation where the value in a readonly textbox was not found in the underlying page HTML. Even though the browser displayed 'A504Y' in the textbox, I couldn't retrieve it using Webdriver's .text method: string ...

htmlselenium-webdriverwebdriver

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

What is the best way to ensure that an element remains fixed at the bottom of a div or card

I am currently working on creating cards that contain a link at the end. My goal is to have these links consistently displayed at the bottom of the div, regardless of the text length. Currently, they appear at the end of the text content. Is there an easy ...

cssbootstrap-4

Conceal excessive content on elements set in a stationary position

How can we prevent overflow of a fixed div within a container? Initially, I attempted nesting fixed elements inside each other, but that did not solve the issue. The only solution that comes to mind is using "inverted" masks: other fixed divs that hide eve ...

csswebpositionoverflow

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using c ...

htmlcsswebkit

Mobile-friendly HTML email design featuring bottom navigation bar

Currently, I am in the process of coding a responsive email template. Here is what I have so far: Click here to view <tr class="main_nav"> <td id="mobile_nav" width="600"> <table cellpadding="0" cellspacing="0" width="100%"> ...

htmlcsshtml-email

Breaking apart a pipe-separated text and sending it through a JavaScript function

CSS: <div class="pageEdit" value="Update|1234567|CLOTHES=5678~-9876543?|5678"> <a href="https://host:controller">Update</a> </div> Trying to retrieve the data within the div and pass it into a JavaScr ...

javascripthtmljqueryjsp

I recently ran npm install --save bootstrap and now I am unable to locate the bootstrap.min.css file anywhere

Trying to follow a tutorial based on a video, I'm running into an issue where I can't locate the bootstrap.min.css file mentioned. Despite searching online, I haven't found any relevant information. The files I have access to are: https://i ...

cssnpm

Newcomers to Visual Studio Code facing a problem with images not displaying

As a beginner in all aspects, I am currently facing an issue with displaying an image on Visual Studio Code. The problem arose when I tried to create a separate folder for the image, which resulted in a cascade of subfolders that only made things worse eac ...

htmlcssimagebootstrap-5

Adding an attribute to the last item of an Angular / NGX Bootstrap component

I am working with a dynamic list that utilizes NGX Bootstrap Dropdowns to showcase 4 sets of dropdown lists. However, the Dropdowns in the final list are getting obscured off-page. Thankfully, NGX Bootstrap offers a solution in the form of a dropUp option ...

javascripthtmlangulartypescriptngx-bootstrap

Overriding PrimeNG styles with Bootstrap _reboot.scss

I'm facing an issue where Bootstrap is overriding my PrimeNG styles, particularly with its _reboot.scss file. I have included the relevant parts where I referenced it in both my styles.scss and angular.json files. Interestingly, I noticed that this is ...

htmlcsstwitter-bootstrapbootstrap-5primeng

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

A div in the center, flanked by two divs that stretch all the way to the edges of the

Looking for a more efficient way to create a centered div with extended divs on either side reaching the page margin. Currently, I am using two divs with 49% width each, and then placing a centered div on top of them to achieve the desired effect. Howeve ...

htmlcss

Change the position of the specified footer on the one-page website

I am currently in the process of creating a single-page layout website. What I want is to have the elements with the class "footer-bar" positioned absolutely on each page, but on the #Home Page, it should be position relatively. Does anyone have any sugge ...

htmlcss

Resizeable drag and drop two-column design

Experimenting with creating a drag re-sizable layout using jQuery UI was quite an interesting challenge for me. If you want to check out the result, here is the link. However, my original goal was to achieve something different from what I ended up with. ...

jquerycssjquery-ui

What is the best way to customize the look of the v-calendar component in Vue.js?

I've recently started a project that involves Vue.js, and I needed to create a datepicker for it. After some research, I opted to utilize the v-calendar package. The implementation of the component went smoothly and functioned as expected right out o ...

cssvue.jsdatepickervcalendar

Styling Overlapping Divs with CSS3

I am attempting to replicate this particular effect using HTML within the UIWebView control on iOS. The desired outcome is to simulate a progress bar on the listing. My current approach involved utilizing this method, however, as you can observe, adding pa ...

cssoverlapping

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

javascriptjqueryhtmljsf-2datatables

Should all images be set to 100% width with a standard Bootstrap configuration?

For my website project, I decided to incorporate the Bootstrap carousel into the header using version 3.0.3 of Bootstrap. Everything seemed to be functioning correctly until I noticed a strange issue with the image sizes on the page. Initially, all the ima ...

htmlcsstwitter-bootstrapresponsive-designcarousel

Incorporating a transition effect to simultaneously toggle between two classes

I'm currently troubleshooting the demo below. For some reason, I am unable to apply a transition to either .fa-chevron-right or .fa-chevron-left when toggling between two classes. Can anyone help me figure out why? $("button").on("click", function( ...

javascriptjquerycsscss-transitions