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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #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
You might also like these
A Quick Guide to Object-Oriented Programming in PHPPHPHow to add Local State to a Class in React?ReactWhat are keys in React?ReactHow to reprocess failed items in Etrieve Flow?MiscellaneousSteps to Install Microsoft SQL Server on a MacOSSQL/MySQLJavaScript: how to detect a browser using the user agent?JavaScriptHow to position an image on top of another image using CSS?CSSStyling Lists with CSSCSS3 Types of Arrays in PHPPHPHow to add AppRoutingModule in Angular application using command line?AngularWordPress: How to find all posts from a custom post type with specific custom field?WordPressWhat is Prototypal Inheritance in JavaScript?JavaScript