The CSS Podcast - 009: Layout
Imagine you're working as a developer, and a designer colleague hands you a design for a brand new website. The design has all sorts of interesting layouts and compositions: two-dimensional layouts that are considerate of viewport width and height, as well as layouts that need to be fluid and flexible. How do you decide the best way to style these with CSS?
CSS provides us with various ways to solve layout problems, on a horizontal axis, vertical axis, or even both. Choosing the right layout method for a context can be hard, and often you may need more than one layout method to solve your problem. To help with this, in the following modules, you'll learn about the unique features of each CSS layout mechanism to inform those decisions.
Layout: a brief history
In the early days of the web,
designs more complex than a simple document were laid out with <table> elements.
Separating HTML from visual styles was made easier when CSS was widely adopted by browsers in the late '90s.
CSS opened the door to developers being able to completely change the look and feel of a website without ever touching HTML.
This new capability inspired projects such as The CSS Zen Garden,
which was created to demonstrate the power of CSS to encourage more developers to learn it.
CSS has evolved as our needs for web design and browser technology have evolved. You can read how CSS layout and our approach to layout has evolved over time in this article by Rachel Andrew.
Layout: the present and future
Modern CSS has exceptionally powerful layout tooling. We have dedicated systems for layout and we're going to have a high-level look at what we have at our disposal, before digging into more detail of Flexbox and Grid in the next modules.
Understanding the display property
The display property does two things.
The first thing it does is determine if the box it is applied to acts as inline or block.
.my-element {
display: inline;
}
Inline elements behave like words in a sentence.
They sit next to each other in the inline direction.
Elements such as <span> and <strong>,
which are typically used to style pieces of text within containing elements like a <p> (paragraph),
are inline by default.
They also preserve surrounding whitespace.