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

#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
Sorting Object Arrays in JavaScriptJavaScriptAll different methods for accessing elements in the DOM using JavaScriptJavaScriptHow to add Go Back button in Swift 5?SwiftHow to use HTML picture Tag?HTMLKilling A Project Part 2: Who should make the decision to kill a project?MiscellaneousWhat is Prototypal Inheritance in JavaScript?JavaScriptWordPress: How to display slider repeater fields in ACF?WordPressHow to define visibility for a property in PHP?PHPfirst-of-type and last-of-type selectors in CSSCSSHow to create a simple text and image slider using CSS and JavaScript?CSSComposing and Extracting Components in ReactReactHow to set up the local environment and workspace for Angular development?Angular