Topics Covered:
Display: Grid
Display: Flex (justify-content)
Display: Block
Display: Inline-block
Display: None
1. Display: Grid
Description:
The display: grid property is a powerful CSS layout system that allows the creation of complex, responsive grid-based layouts. It provides control over rows, columns, and grid areas, facilitating structured and visually appealing web pages. Key concepts include grid containers, grid items, grid templates, and gaps.
2. Display: Flex (justify-content)
Description:
The display: flex property creates flexible box layouts, allowing items within a container to be aligned and distributed based on the available space. The justify-content property aligns items along the main axis, with options like flex-start, flex-end, center, space-between, space-around, and space-evenly. Key concepts include flex containers, flex items, the main axis, and justify-content.
3. Display: Block
Description:
The display: block property makes an element a block-level element, meaning it occupies the full width available and starts on a new line. Key concepts include block-level elements, full-width occupancy, and new line behavior.
4. Display: Inline-block
Description:
The display: inline-block property allows an element to behave like an inline element while having block-level properties such as width and height. Inline-block elements sit next to each other without breaking to a new line. Key concepts include inline behavior, block properties, and no line breaks.
5. Display: None
Description:
The display: none property hides an element from the page, removing it from the document flow entirely. The element is not visible, does not occupy space, and is not interactive. Key concepts include visibility, document flow, and interactivity.