So far you've learned about the flex and grid display property values. There are several others that are important to understand. This page will introduce some of these.
A basic understanding of HTML A basic understanding of CSS selectors and properties
Below is a list of the most common display property values:
block: An element takes up its own space, meaning it covers the entire width of the page and neighboring elements are positioned to either side of the element
inline: An element does not generate line breaks before or after itself. In a normal layout, the next element will be on the same line if there is space
inline-block: Similar to inline, except that you're able to assign a height and width
table: An element behaves like the table html tag
none: An element is removed from the DOM without being deleted. Surrounding elements will fill in to the space of the element with the display property value of none. Often paired with Javascript to make element disappear and appear at the click of a button.
These are just a few of the most common display property values that you will work with. For an exhaustive list, visit Mozilla Developer Network CSS display
Every HTML element has a default display property value, but you can change them to suit your needs. In this page you learned about several common display property values.