Avoiding vacant areas in an even number of compartments

Looking for assistance with my grid layout build. Here are the requirements:

  1. All grid cells must have a minimum, fixed size of 120px.
  2. The number of cells will always be even.

I want the grid to efficiently fill all empty spaces.

Currently, the implementation works well for small containers but struggles with overflow in larger sizes.

// Minimum width for grid cells
$minimum-cell-width: 120px;

.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minimum-cell-width, 1fr));
  width: 600px;
}

With this setup, I get 4 cells in the first row and 2 in the second. However, I aim for 3 cells per row to maximize space usage.

I prefer not to increase the $minimum-cell-width variable (though it would solve the issue).

For more code and detailed examples, check out this CodePen link:

https://codepen.io/surjikal/pen/XxxgNx

csscss-grid

Answer №1

How do the grid items determine the number of items per row?

The only parameter they have to abide by is not being smaller than 120px in width, but they are free to occupy any available space within their track.

All the container knows is its own width. It has no knowledge of what the items should be doing. Similarly, the items have no clue about where they should wrap, so they default to their relationship with the container based on the rules you've established.

Your layout looks fine in smaller containers because those widths align well with the minimum width set for the tracks to control the number of items per row evenly. However, if you reduce the minimum width from 120px to let's say 50px, you'll encounter the same issue with larger containers.

To make your layout function effectively, you need to specify both the width of the container (as you've already done) and the widths of the individual items. This can be achieved without altering the minimum width variable.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.container-widest {
  grid-template-columns: repeat(auto-fit, minmax(120px, 25%)); /* new */
  width: 700px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-wide {
  grid-template-columns: repeat(auto-fit, minmax(120px, 200px));  /* new */
  width: 600px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-narrow {
  width: 400px;
  background-color: rgba(0, 200, 0, 0.4);
}

.container-narrower {
  width: 300px;
  background-color: rgba(0, 200, 0, 0.4);
}

/* style stuff */
html {
  padding: 20px;
  font-family: monospace;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 3px;
}

.cell {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-width: 2px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 26px;
  padding: 40px;
  text-align: center;
  font-weight: 1;
  border-radius: 3px;
}

p {
  text-align: center;
  padding-top: 50px;
}
<p>This ideally results in 4 cells per row to fill all blank spaces</p>
<div class="container container-widest">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
</div>

<p>For this configuration, aim for 3 cells per row</p>
<div class="container container-wide">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

<p>The layout functions smoothly here</p>
<div class="container container-narrow">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

<p>Another successful example!</p>
<div class="container container-narrower">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

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

Disable the automatic scrolling feature of the daisyUI carousel when moving between slides

I recently implemented a carousel with indicator buttons from daisyUI in my Nextjs application. Unfortunately, I noticed that when clicking on an indicator button, not only does it switch slides but it also scrolls the page so that the top of the slide ali ...

cssnext.jstailwind-cssdaisyui

Having trouble formatting the Modal form in Bootstrap when using AngularJS

The code runs successfully, but I am struggling to get the desired output. You can find the code here. <div class="modal fade" id="signup" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content"> ...

javascripthtmlcssangularjstwitter-bootstrap

Moving the final item in the list to the end

I've chosen to implement the Vali Admin theme and am currently attempting to move the last list item in the left sidebar to the bottom. While I have limited experience with flexbox, I decided to change the menu to display: flex and followed the steps ...

htmlcssflexbox

Displaying outcomes in real-time as they appear on the HTML page

I've got a Python for loop that can generate anywhere from 1 to 20 outputs. I'm constructing a web app (using Flask and Heroku) and want each output to be displayed on my HTML page as it's generated by the loop. Here's how I'd like ...

pythoncssherokuflask

I require assistance in eliminating the border around the search bar

When I have a search bar and don't click on it, it looks like the image belowhttps://i.sstatic.net/SbDbf.png But as soon as I type something, a blue border appears that I don't want. I'm not sure how to remove ithttps://i.sstatic.net/bOsjO. ...

htmlcssreactjs

Tips for resolving the issue with "Text Animation"

Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate lea ...

htmlcsstextcss-animations

Using PHP to filter data using $_GET variables?

https://i.sstatic.net/vDqe3.png In order to sort the small divs based on specific filters like AB Main Hall, AB Club, Huis 23, I believe using $_GET is necessary. Here is the code snippet I currently have. <?php $concert = [ [ "datum" =& ...

phphtmlcssarraysget

Create a JavaScript timer on a PHP file that sets the input and textarea styles back to their default

When I use a timer in a JavaScript file after submitting a form to insert data into a MySQL database via PHP, the style of the textarea and input elements changes back to default. This issue only occurs when the timer is active. I tested submitting the fo ...

javascriptphphtmlcssmysql

Center anything vertically within the input element of a form-group using Bootstrap 4

Is it possible to vertically center any element in the middle of an input using Bootstrap 4 without a complex structure? The first example at https://jsfiddle.net/fekula/8j4ew5df/9/ looks good, but the second and third examples are not ideal. <div clas ...

htmlcsstwitter-bootstrapbootstrap-4

Please indicate the quantity of items to be displayed in a panel equipped with a scrollbar

Take a look at the current picture: https://i.sstatic.net/11T4tm.png The issue is figuring out how to reduce its size and then implementing a scrollbar to navigate through the other elements. I am working with Bootstrap, and below is my code snippet: ...

htmlcssbootstrap-4

Include a nested input field and corresponding label within a div element

Using JavaScript, I am attempting to dynamically add a div containing an input and label within another div in the body. The color variable inside the JavaScript code will eventually be relocated within the file, but for clarity, it is included here. Essen ...

javascripthtmlcssappendchild

Customize CSS based on user's device in Google Script Web App

Seeking Clarity: I have a straightforward project involving a Google Script / Web App, but I am struggling to find a way to load a specific CSS file based on the user's device. In other words, rather than focusing on responsive design, I need to loa ...

javascripthtmlcssgoogle-apps-script

Utilizing JQUERY to modify the 'top' attribute upon clicking

I am attempting to implement a vertical scroller using jQuery, but I'm encountering difficulties with my code. function scrolldown() { var newtop = $('.scroll-content').css('top') + '250'; $('.scroll ...

jquerycss

Substituting Meta Viewport tag with alternative CSS method for HTML emails

In an effort to improve support for legacy Blackberrys, we made the decision to take out the meta viewport tag <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0" /> from our HTML emails. Some major email test ...

csswindows-phone-7html-emailmetaemail-templates

Padding beneath font only seen in Apple devices

My horizontal navigation bar and footer appear perfectly on my PC, but when I tested it on a Mac, the font seemed to be raised about 30px above its intended position in the navigation bar. After attempting various CSS resets and adjustments to the line-he ...

macoscssfontsbaseline

Is it possible to utilize both CSS assets and the public folder within a single application?

I am facing the challenge of migrating a legacy application to utilize the Rails 3 asset pipeline. With over 100 stylesheets being imported on a template by template basis using a content_for :stylesheets block, compiling them into a single stylesheet i ...

cssruby-on-railsruby-on-rails-3

How to position the play button in the center using Material UI and Flexbox

Seeking advice on achieving a centered play button with borders in this layout. Struggling with flexbox to position the play button within the code provided. function Tasks(props) { const { classes } = props; return ( <div className={classe ...

cssflexboxmaterial-ui

Make the child DIV's width equal to the width of its parent DIV, even when the parent DIV's width is not

I am experiencing an issue with a dropdown menu. I have created this code (with the assistance of w3schools)... :) The problem is that the sub-division that appears when I hover over a division does not match the width of the parent. I attempted to assig ...

htmlcss

Rules of HTML tables extend to the border size

Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...

htmlcsshtml-table

Generate PHP web pages automatically

I'm seeking assistance on automating the creation of individual PHP pages. Currently, I have a page called catalog.php set up. Within catalog.php, there is an SQL query that connects to the database and retrieves specific information: $link = mysql ...

phpmysqlhtmlcss