dots Created with Sketch.
Yogesh Chauhan's Blog

Gap in Flex?

in CSS on July 21, 2021


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 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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
bin2hex() and chr() String Functions in PHPPHPRBV Framework and closing of big brandsMiscellaneousUnary Operators in JavaScriptJavaScriptQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptHow to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScript10 Usability Blunders to AvoidUI/UXCreate a menu with a curtain falling animation using CSS and JavaScriptCSSHow to overwrite file contents with new content in PHP?PHPOOP, Class and Objects Strategies For Beginners (PHP)PHPWhat’s new in Constructor in PHP 8?PHPHow to add multiple components in React app?ReactHow to modify navigation menus in WordPress?WordPress