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
WHERE Clause in PostgresPostgresSolution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscellaneousKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousComposing and Extracting Components in ReactReactMIN, MAX, COUNT, AVG and SUM in SQLSQL/MySQLThe difference between Class declarations and Class expressions in JavaScriptJavaScriptHow to auto-resize textarea based on text input using JavaScript or jQuery?JavaScriptapply_filters function in WordPressWordPressSocial Media Colors: LESS VariablesMiscellaneousHow to send and receive query strings via links in Angular 9?AngularWhat’s a Closure in JavaScript?JavaScriptWhat does useEffect do in React?React