Choosing Display Type in CSS

#

What is display property in HTML container?

#

There are many HTML container tags, discussed in another article. But the content inside these container can be rendered in different ways. This is controlled by a property display. What are the different values of display property and what is the meaning of those, we will see those in this article.

The display property in CSS defines how an element is displayed in the layout — it’s one of the most fundamental properties in CSS.

Here’s a breakdown of the most common and important values of display, along with their meanings and typical use cases:

1. Block-level Displays

#

2. Flexbox Layout

#

Once you use display: flex, you use properties like justify-content, align-items, flex-direction inside it.

3. Grid Layout

#

4. Table Layout (for table-like designs)

#

You can use these to make a table-like layout without actual <table> elements.

5. Other Values

#

Common Use Cases

#

Usage of display : flex

#

When you apply display: flex to a container, you can then use various flex properties to control the layout of its child elements.

Example:

#

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between; /* Align items horizontally */
  align-items: center;            /* Align items vertically */
  flex-direction: row;            /* Default: row (horizontal) */
  gap: 10px;                      /* Add spacing between items */
}

Common flex properties:

#

Usage of display: grid

#

CSS Grid Layout is a powerful layout system in CSS designed to help web developers create complex and responsive web layouts easily and efficiently. It allows you to create two-dimensional layouts—both rows and columns—without using floats or positioning tricks.

What is CSS Grid Layout?

#

CSS Grid is a layout model that lets you divide a web page into major regions or define the relationship in terms of size, position, and layer between parts of a control built from HTML primitives.

Think of it as turning your container into a grid of cells, where you can place child elements precisely in any cell or span across multiple cells.

How CSS Grid Works

#

1. Create a Grid Container

#

You define a grid by setting display: grid on a container.

.container {
  display: grid;
}

2. Define Rows and Columns

#

Use grid-template-columns and grid-template-rows to define the structure.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto auto;
}

This example creates:

• 3 columns: one fixed (200px) and two flexible (1fr each)
• 2 rows with automatic height

3. Place Grid Items

#

Each direct child of the grid container becomes a grid item, and you can control its position using:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

Or use shorthand:

.item1 {
  grid-area: 1 / 1 / 2 / 3; /* row-start / column-start / row-end / column-end */
}

✅ Key Features of CSS Grid

#

🎯 Use Cases of CSS Grid

#

• Page Layouts: Headers, sidebars, footers, main content
• Dashboards: Control panels with resizable sections
• Galleries: Image grids with consistent spacing
• Forms: Neatly aligned labels and inputs

🆚 Flexbox vs Grid

#

🧠 Visualization Example

#

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

HTML:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

This creates a 3-column layout with equal widths and 10px gaps between boxes.

How to set display property in bootstrap and tailwind?

#

The underlying CSS display values are the same, but the class names and flexibility differ between Bootstrap and Tailwind. Tailwind tends to be more expressive and granular by default. Both provide utility-based control over display. Both support responsive variants.

1. Bootstrap:

Bootstrap provides utility classes for the display property using the pattern:

.d-{value}

Common examples:

• .d-block → display: block;
• .d-inline → display: inline;
• .d-flex → display: flex;
• .d-none → display: none;
• responsive variations like: .d-sm-none, .d-md-block, etc.

2. Tailwind CSS:

Tailwind provides utility classes for display using descriptive class names:

display: {value}

Common examples:

How does browser knows which framework to use for css class?

#

Frameworks like Tailwind and Bootstrap are developer tools. Browsers just apply CSS rules — they don’t “know” what framework you’re using.

1. Tailwind / Bootstrap = Class Names → CSS

Frameworks like Tailwind and Bootstrap define a set of prewritten CSS classes that map to standard CSS properties.

Example:

<div class="grid"> <!-- Tailwind -->
<div class="d-grid"> <!-- Bootstrap -->

Behind the scenes:

• Tailwind:

  .grid {
    display: grid;
  }
  

• Bootstrap:

  .d-grid {
    display: grid;
  }
  

When the browser sees:

<div class="grid">

It doesn’t think: “Ah, Tailwind!” It just sees the class name and applies the CSS rule:

display: grid;

Developer Side vs. Browser Side