Yogesh Chauhan's Blog

A simple example on grid ‘auto-fill’ vs ‘auto-fit’

in CSS on May 23, 2021

When you want to have multiple child elements in a container with same width, you use repeat() function and set the width for the columns.

Just like this:

The problem with that structure is that it’s responsive. So, to make it responsive we can use minmax() with repeat(). But that alone won’t fix the responsiveness issue. We need to auto placement the child elements when the window size decreases.

If you want to divide the width of a container between it’s elements then go for auto-fit.

Just like this:

But if you don’t want to divide the elements equally and but keep the width same for all elements then go for auto-fill.

Let’s compare both:

You won’t see any difference if the elements combined minimum width is equal or greater than the container’s minimum width.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to use PHPMailer to send an Email via Gmail SMTP Server?PHPCustom Post Type Template Files in WordPressWordPressHow to change the style for checked radio button or checkboxes using CSS?CSSHow to create a flip pricing table using CSS and JavaScript?CSSHow to Recognize an Array in JavaScript?JavaScriptHow to create a Child Theme in WordPress?WordPressContainers 101: What are containers?MiscellaneousWordPress: How to print ACF repeater field values?WordPressWhat are “holes” in a React component?ReactHow to change value of a span tag using a reference from another div using jQuery?jQueryThe difference between 400(4xx) and 500(5xx) errorsMiscellaneousReverse a String in JavaScriptJavaScript