CSS display Property: CSS Display

Practical Examples of the display Property

Let’s dive into practical examples to illustrate how each value of the display property affects the rendering of HTML elements.

display: none;

The display: none; value completely removes an element from the document. It’s as if the element doesn’t exist in the HTML structure.

<div id="displayNoneContainer">
  <p>This paragraph is visible.</p>
  <p id="hiddenParagraph">This paragraph is hidden.</p>
  <p>This paragraph is also visible.</p>
</div>

<style>
  #hiddenParagraph {
    display: none;
  }
</style>

document.getElementById("displayNoneContainerOutput").innerHTML = document.getElementById("displayNoneContainer").innerHTML;
document.getElementById("displayNoneContainerOutput").querySelector("#hiddenParagraph").style.display = "none";

display: inline;

The display: inline; value causes an element to be rendered as an inline element. Inline elements flow within the text and only take up as much width as necessary.

<div id="displayInlineContainer">
  <p>This is a <span>span element</span> with display: inline.</p>
</div>

<style>
  span {
    display: inline;
    background-color: lightblue;
  }
</style>

document.getElementById("displayInlineContainerOutput").innerHTML = document.getElementById("displayInlineContainer").innerHTML;

display: block;

The display: block; value causes an element to be rendered as a block-level element. Block-level elements take up the full width available and start on a new line.

<div id="displayBlockContainer">
  <p>This is a paragraph with display: block.</p>
  <span id="blockSpan">This is a span with display: block.</span>
  <p>This is another paragraph.</p>
</div>

<style>
  #blockSpan {
    display: block;
    background-color: lightgreen;
    padding: 5px;
  }
</style>

document.getElementById("displayBlockContainerOutput").innerHTML = document.getElementById("displayBlockContainer").innerHTML;

display: inline-block;

The display: inline-block; value allows an element to flow within the text like an inline element, but it can also have a specified width and height like a block-level element.

<div id="displayInlineBlockContainer">
  <div class="inline-block">Inline Block 1</div>
  <div class="inline-block">Inline Block 2</div>
  <div class="inline-block">Inline Block 3</div>
</div>

<style>
  .inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: lightcoral;
    margin: 5px;
    text-align: center;
  }
</style>

const container = document.getElementById("displayInlineBlockContainerOutput");
const originalContainer = document.getElementById("displayInlineBlockContainer");
container.innerHTML = originalContainer.innerHTML;

const inlineBlockElements = container.querySelectorAll(".inline-block");

inlineBlockElements.forEach(element => {
    element.style.display = "inline-block";
    element.style.width = "100px";
    element.style.height = "50px";
    element.style.backgroundColor = "lightcoral";
    element.style.margin = "5px";
    element.style.textAlign = "center";
});

display: flex;

The display: flex; value turns an element into a flex container, enabling the use of Flexbox layout for its children. Flexbox provides a powerful way to align and distribute space among items in a container.

<div id="displayFlexContainer">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

<style>
  #displayFlexContainer {
    display: flex;
    background-color: lightsalmon;
    padding: 10px;
  }

  .flex-item {
    background-color: white;
    margin: 5px;
    padding: 10px;
    text-align: center;
  }
</style>

document.getElementById("displayFlexContainerOutput").innerHTML = document.getElementById("displayFlexContainer").innerHTML;

display: grid;

The display: grid; value turns an element into a grid container, enabling the use of CSS Grid Layout for its children. Grid layout provides a powerful way to create two-dimensional layouts.

<div id="displayGridContainer">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

<style>
  #displayGridContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background-color: lightseagreen;
    padding: 10px;
  }

  .grid-item {
    background-color: white;
    padding: 20px;
    text-align: center;
  }
</style>

document.getElementById("displayGridContainerOutput").innerHTML = document.getElementById("displayGridContainer").innerHTML;

Real-World Applications of the display Property

The display property is essential for creating complex and responsive web layouts. Here are some real-world applications:

• Navigation Menus: Using display: flex; to create horizontal navigation menus.
• Image Galleries: Using display: grid; to create responsive image galleries.
• Forms: Controlling the layout of form elements using various display values.
• Responsive Layouts: Hiding or showing elements based on screen size using media queries and the display property.

Use Case Example: Creating a Responsive Image Gallery

Let’s create a practical example of using the display property with CSS Grid to build a responsive image gallery. This example demonstrates how to use media queries to adjust the number of columns in the gallery based on the screen size.

<div id="imageGallery">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Image 1" class="gallery-item">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Image 2" class="gallery-item">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Image 3" class="gallery-item">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Image 4" class="gallery-item">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Image 5" class="gallery-item">
  <img src="https://dummyimage.com/200x150/000/fff" alt="Image 6" class="gallery-item">
</div>

<style>
  #imageGallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
  }

  .gallery-item {
    width: 100%;
    height: auto;
  }

  @media (max-width: 600px) {
    #imageGallery {
      grid-template-columns: 1fr; /* Single column on smaller screens */
    }
  }
</style>

const galleryContainer = document.getElementById("imageGalleryOutput");
const originalGalleryContainer = document.getElementById("imageGallery");
galleryContainer.innerHTML = originalGalleryContainer.innerHTML;

This example demonstrates several important concepts:

1. CSS Grid Layout: Using display: grid; to create a flexible grid layout.
2. Responsive Design: Adjusting the layout based on screen size using media queries.
3. Image Handling: Ensuring images fill their grid cells while maintaining aspect ratio.
4. Automatic Column Fitting: Using repeat(auto-fit, minmax(200px, 1fr)) to create as many columns as possible while maintaining a minimum width.

This practical example shows how the display property, combined with CSS Grid and media queries, can be used to create a responsive and visually appealing image gallery.

Browser Support

The display property enjoys excellent support across all modern web browsers, ensuring that your layouts will render consistently across various platforms.

Conclusion

The display property is a fundamental aspect of CSS layout, providing the ability to control how elements are rendered and positioned within a web page. Mastering the various values of the display property, including none, inline, block, inline-block, flex, and grid, is essential for creating modern, responsive, and visually appealing web designs. This comprehensive guide should equip you with the knowledge and practical examples needed to leverage the power of the display property in your projects. Happy coding!

Continue Reading

JavaScript Window length Property: Window Length

February 22, 2025

JavaScript Window name Property: Window Name

February 22, 2025

JavaScript Window navigator Property: Window Navigator

February 22, 2025

JavaScript Window opener Property: Window Opener

February 22, 2025

JavaScript Window outerHeight Property: Window Outer Height

February 22, 2025

JavaScript Window outerWidth Property: Window Outer Width

February 22, 2025

Innovative IT and Ed-Tech Solutions to Empower Your Business and Shape the Future.

Overview

Contact Us

[email protected]

© 2025 • CodeLucky IT Services

Back to top