YogeshChauhan . com

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.

amazon

Most Read

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

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

4 ways to create Date Objects in JavaScriptJavaScriptINNER JOIN in PostgresPostgresThe flex-grow, flex-shrink and flex-basis Properties in CSSCSSHow can one check to see if a remote file exists using PHP?PHPHow to add Google Static Map using ACF map field?WordPressLearn to Make a Simple Contact Us Form using PHP and PDO-MySQLPHPContainers 101: What are containers?MiscHow to use @if and @else in SCSS?SCSSArray destructuring and Object destructuring in JavaScriptJavaScriptHow to create a simple stopwatch using JavaScript?JavaScriptHow to concatenate variable with string in Swift?SwiftModules and its Core features in JavaScriptJavaScript