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 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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Full and Partial ROLLUP in Postgresql with ExamplesPostgresHow to create a cross-browser smooth scrolling with jQuery?jQueryHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftHow to add multiple Columns in CSS like Bootstrap?CSSWhat are Identifiers in JavaScript?JavaScriptHow to zoom an element on hover using CSS?CSSSolution for “Yarn build: Failed because of a stylelint error”WordPressNATURAL JOIN in PostgresPostgresHow to get front page or home page ID in WordPress?WordPressHow to create a for loop in SCSS (Sass)?SCSSHow to create a sticky menu pin using CSS?CSSfor @each loop in SCSSSCSS