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