0Pricing
Frontend Academy · Lesson

Display: block inline flex grid basics

Switch between display values and see how block, inline, flex, and grid each arrange content differently.

Display: block inline flex grid basics is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The display Property

The display property is the most important CSS property for layout. It controls how an element participates in the layout flow and how its children are arranged. The most used values: block, inline, inline-block, flex, grid, and none.

display: block

Block elements take up the full width of their container and start on a new line. Examples: <div>, <p>, <h1>. You can set width, height, margin, and padding on block elements.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Inline elements flow within text — they don't start on a new line. Examples: <span>, <a>, <strong>. Width, height, and vertical margins have no effect on inline elements.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block combines both: the element flows inline (like text) but accepts width, height, and vertical margin (like block). Useful for buttons and badges that should sit in a line of text.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none removes the element completely from the layout — it takes up no space. Use visibility: hidden to hide it while preserving the space it occupied.

Flexbox — One-Dimensional Layout

display: flex turns an element into a flex container. Its direct children become flex items that arrange themselves along a row (default) or column. Flex excels at distributing space and aligning items.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Key Flexbox Properties

flex-direction: row | column. justify-content: space-between | center | flex-end. align-items: center | flex-start | flex-end | stretch. gap: spacing between items without using margin.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — Two-Dimensional Layout

display: grid turns an element into a grid container. You define rows and columns with grid-template-columns and grid-template-rows. Grid is ideal for page layouts and card grids.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

The fr Unit

The fr (fraction) unit distributes available space. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle gets twice as much space as the others.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Choosing Between Flex and Grid

Use Flexbox for one-dimensional layouts (a row of buttons, a stack of cards). Use Grid for two-dimensional layouts (a page skeleton, a photo gallery with explicit rows and columns). Both can coexist in the same page.

display: none vs visibility: hidden

display: none: removes from layout, not accessible to screen readers. visibility: hidden: invisible but still occupies space, still in accessibility tree. opacity: 0: invisible but takes space and is accessible.

Quick Check

You need to lay out a responsive card grid with multiple rows and columns. Which display value is the best starting point?

Recap: Display Values

block takes full width. inline flows with text. inline-block is both. flex arranges children in one dimension. grid arranges children in two dimensions. none removes from layout. Master these and you control every layout on the web.

Frequently asked questions

Is the “Display: block inline flex grid basics” lesson free?

Yes — the full text of “Display: block inline flex grid basics” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Display: block inline flex grid basics”?

Switch between display values and see how block, inline, flex, and grid each arrange content differently. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Display: block inline flex grid basics” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Selectors and the Cascade
  2. Colors Typography and the Box Model
  3. Display: block inline flex grid basics
  4. Positioning: relative absolute fixed sticky
← Back to Frontend Academy