"CSS provides a variety of services for web content: In the previous chapter, we used it to format content: to change colors, typefaces, etc. In this chapter, we will use it to lay out content: to place HTML elements on a page. Almost all of the diagrams in this blog post were created via HTML and CSS. You can check out the originals here: html/css-layout.html"
"What does "laying out content" actually mean? Let's look at two examples where want HTML elements to be placed on a page in particular fashion. The first example is a horizontal list of links with gaps between them. The dashed gray border shows the (invisible) boundary of the <div> that contains the links: This is how we'd like to tell CSS what to do: The links should be placed in a horizontal row, with gaps between them."
"The second example is a sidebar that occupies a fixed narrow space on the left of the page. The rest is taken up by the actual content: This is how we'd like to tell CSS what to do: There is a grid with two columns and a single row. The first column has a fixed narrow width. The second column is as wide as fits the page. The row is as tall as is necessary for the content to fit."
CSS provides styling and layout services for web content. Layout controls placement of HTML elements on a page. Flexbox arranges elements in one-dimensional rows or columns and handles spacing between items, useful for horizontal lists of links. Grid defines two-dimensional layouts with rows and columns, allowing fixed-width sidebars and flexible content areas. Diagrams and examples can be implemented with HTML and CSS to illustrate layout behavior. Layout requires an outer container that holds child items; the container defines layout behavior while children act as layout items placed according to the chosen model.
Read at 2ality
Unable to calculate read time
Collection
[
|
...
]