Learning CSS page layouts
CSS provides us with a range of possibilities for laying out web pages. We will be looking into the three most common techniques for laying out web pages. These are as follows:
float
flex
grid
Armed with this knowledge, combined with your knowledge of HTML structural tags, you will be able to code a range of web page layouts. The concepts learned in this part of the chapter will form the core of your frontend development skillset and you will use these techniques over and over throughout your career.
Video store product page
In order to gain a solid understanding of how these three different approaches to layout work, we shall use a video store product listing page as a concrete example. We will work through solutions to the following design using the three most common layout techniques, one by one. For the examples that follow, we will only be concerned with the product section of the page:
Figure 2...