MapCSS

Layout

Visibility

Utilities for controlling the visibility of an element.

Basic usage

Making elements invisible

Use invisible to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with .hidden from the display documentation).

01

03

<div className="grid grid-cols-3 gap-4">
  <div>01</div>
  <div className="**invisible** ...">02</div>
  <div>03</div>
</div>

Making elements visible

Use visible to make an element visible. This is mostly useful for undoing the invisible utility at different screen sizes.

01

02

03

<div className="grid grid-cols-3 gap-4">
  <div>01</div>
  <div className="**visible** ...">02</div>
  <div>03</div>
</div>