Yogesh Chauhan's Blog

Gap in Flex?

in CSS on July 21, 2021

Yes.

Gap in Flex.

Just like grid, gap works on Flex and columns too.

You can actually create a nice grid without even using CSS grid.

I you have an old site and you’re adding the gap using margin-bottom and margin right to create a nice grid. But you can just use gap instead. Keep in mind that some browsers still don’t support it completely.

Here’s one example of creating a grid view using flex and flex-gap. I have a fixed height and width set but you can always make the flex-items equal and leave those units set as 100%.







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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
How to load variables, functions, and mixins from another module in SCSS?SCSSHow to Use SQL MAX() Function with Dates?SQL/MySQLHow to create bouncing balls using HTML canvas and JavaScript?HTMLHow to hide a DIV on clicks outside of it using jQuery?jQueryHow to uninstall Cocoapods from the Mac OS?MiscellaneousShort-Circuit Evaluation in JavaScriptJavaScriptA list of wp-cli commands to use via SSHWordPressIf statement shorthand examples in JavaScriptJavaScriptHow JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptJavaScript Number MethodsJavaScriptAlways add associated labels to your Form elementsUI/UXHow to make WordPress main stylesheet (style.css)?WordPress