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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
How to retrieve homepage URL in WordPress?WordPressHow to change the Login Logo in WordPress?WordPresstransform-origin Property in CSSCSSHow to update database configurations in WordPress?WordPressThe Difference Between Arrays and Objects in JavaScriptJavaScriptHow to create HTML elements with ID and class using JavaScript?HTMLCREATE TABLE Examples in PostgreSQLPostgresHow to load variables, functions, and mixins from another module in SCSS?SCSSHow to add a Pie Chart in Angular App?AngularIs Software Really Eating The World? I don’t think soMiscellaneousA short basic guide on states in ReactReactSome SQL LIKE Operators We Need to Keep in MindSQL/MySQL