Congratulations! 😍 As a blog reader, get a 10% OFF on WP Frontend Delete Account PRO. Use coupon code WPFDA10OFF.

CSS Grid: Learning By Doing!

CSS Grid: Learning By Doing!

CSS Grid is a modern way of designing a responsive layout. It’s a powerful and flexible way to design web pages compared to traditional floats and positioning. Float is also a modern way but it focuses on one dimensional layout

CSS Table Layout: Making “x” items per row

CSS Table Layout: Making “x” items per row

While there are several ways to make “x” items per row using CSS. Modern methods are using CSS Grid and CSS Flexbox. Table Layout is an older method but it has some advantages over modern methods such as wide browser

CSS Grid: Making “x” items per row

CSS Grid: Making “x” items per row

By default, the items tend to fit into one line. With CSS grid-template-columns property, we can specify how many items to insert in a row. Let’s take an example with the following HTML Structure: To make 3 items per row,

Flexbox: Making “x” items per row

Flexbox: Making “x” items per row

By default, the flex items will try to fit in one line. To make items wrap into multiple lines, use: Then the items can have flex-basis Note: Do not use the width property for the items. That’s all. 🙏 Explanation: