Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

Having some trouble understanding how auto-fill and fit work in grid layouts. I am familiar with basic CSS, but new to working with grid layouts.

I have a set of checkbox items with labels that I want to display in columns depending on screen size, with column flow. Using the following code:

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

This gives me almost what I need, but when I add:

grid-auto-flow: column;

it only outputs one row with many columns. I've tried different configurations of grid-row-template and grid-column-template without success. I want the layout to adjust based on the number of items while keeping the columns fitting on the screen and the same width.

I will share a snippet of my code where Smalltalk generates the HTML for each checkbox item from a repository.

Styles

.grid-container {
    font-size: .7em;
    display: grid;
}
.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Smalltalk code generating HTML for the checkboxes:

aHTML nextPutAll: '<form><div class="grid-container grid-container--fit">';
subjectItems do: [:i | aHTML nextPutAll: '<label><input type="checkbox" name="subjects" value="', i description,'">', i description, '</label><br>'].
aHTML nextPutAll: '</div></form>';

Answer №1

When it comes to the difference between these two approaches, the true impact is felt in scenarios where there are too few columns in a row and the viewport is at full width. The auto-fill function will fill any extra space with blank columns, while auto-fit will simply add columns without filling the empty space. For instance, if a full-width row has 3 columns, auto-fill will end in the middle leaving the remaining half of the space inaccessible.

So, why use auto-fill to add empty columns? The main benefit is the flexibility it provides when positioning columns using grid-column. You can utilize the empty space for various layout adjustments, such as placing a column at the end of a row and maintaining the container's actual width, which is not possible with auto-fit. It may be challenging to fully grasp this concept through text alone, but hopefully you now have a clearer understanding.

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

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

The HTML div element is not expanding to the full width of the screen on an iPhone device

Recently, I encountered an issue while testing my website on the iPhone. The footer was not covering the full width, especially on Safari browser. After some digging, I realized that the problem might be caused by an absolutely positioned DIV called #leaf- ...

Is there a way to position an image to the left of the container in Jinja templating while floating it?

I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image flo ...

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

Please only choose the immediate children of the body element

<body> <div> <div class='container'></div> </div> <div class='container'></div> </body> Is there a way to use jQuery to specifically target the second container div dire ...

What causes the Footer to appear as a floating element in Tailwind CSS?

I've implemented the tailwind CSS footer into my NextJS project to display fetched data. However, I encountered an issue where the footer only floats when there is less data present. To address this problem, I created a separate footer file within my ...

Function is raising an error with the wrong value or text

I am currently testing a form that I am in the process of developing. My goal is to have different values returned each time I click on a different item from the dropdown menu. If this explanation isn't clear, please take a quick look at my pen for cl ...

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

I'm looking for a skilled CSS spinner creator. Can anyone recommend one?

Can anyone recommend a good online application for creating CSS spinners? I've been searching and only found one on David Walsh's blog, but it only has one available. Any suggestions? ...

"Struggling with the height of Bootstrap row not filling the entire space

I've tried everything but nothing seems to be working. Whether it's a simple height: 100% or experimenting with flex-grow: 1, none of it is doing the trick. I'm having issues with this site I'm currently working on: https://i.sstatic.n ...

How can we use Jquery to add animation effects to our styling

I am a beginner with JQuery and struggling to make the code below work correctly. $('.announcement_panel_button').click(function(e){ $('#site_logo').animate({ 'margin-top': '5px' }, 5000); e.pre ...

Unable to achieve text centering within a button using HTML and CSS

I'm diving into the world of HTML/CSS for the first time and encountering some issues along the way. In my setup.html, I created a "Continue" button and applied a class to style it in styles.css. However, I'm facing an issue where text-align cen ...

Is there a way to ensure my function runs as soon as the page starts loading?

My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I&apo ...

Chrome is failing to run the keyframe animation transform

This solution seems to function properly on Firefox and Safari, and even on IE! However, it encounters issues when used on Chrome. (It runs smoothly on Firefox and IE, but on Chrome the animation does not display at all!) @keyframes animationFrames{ 0% ...

What's the best way to position a grid item so that it moves along with its fellow siblings

I am currently utilizing CSS Grids and I have a specific requirement. I need to offset an element so that it moves horizontally across the grid columns while maintaining its width. Additionally, I want the offset value to be added to the element's exi ...

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png Something like this: https://i.sstatic.net/rfqAB.png Here is my current code: <template> <v-container class=" ...

Troubleshooting issues with the Bootstrap dropdown menu

I am struggling to get a dropdown menu working properly with Bootstrap. Despite looking through similar questions on this forum, I have not yet found a solution that works for me. Below is the HTML head section of my code: <!DOCTYPE html PUBLIC '- ...

Customizing ExtJS 4's CSS reset specifically for tailored HTML inside components

I am currently in the process of upgrading an existing application from Ext 3.x to 4. I have successfully enabled Ext's scoped reset CSS option to prevent Ext from applying its CSS reset to my entire application. However, I am now facing a new issue. ...