/* display: block — default for most elements */
div, p, h1 {
  display: block;      /* fills full width, stacks vertically */
}

/* display: inline — default for text elements */
span, a, strong, em {
  display: inline;     /* flows with text, inline size only */
}

/* display: inline-block — hybrid */
button, img {
  display: inline-block; /* flows inline, but respects width/height */
}

/* display: flex — flexible layout */
.navbar {
  display: flex;       /* children arrange in a row or column */
}

/* display: grid — grid layout */
.dashboard {
  display: grid;       /* children arranged in grid cells */
}

/* display: none — hidden */
.hidden {
  display: none;       /* removed from layout completely */
}

/* Outer display type — block or inline */
display: block;       /* block outer (full width, stacks) */
display: inline;      /* inline outer (flows with text) */

/* Inner display type — how children are laid out */
display: flex;        /* children use flexbox layout */
display: grid;        /* children use grid layout */

/* Full syntax shows both */
display: block flex;  /* block outer, flex inner (rare) */
display: inline flex; /* inline outer, flex inner */
display: block grid;  /* block outer, grid inner (rare) */

/* Shorthand forms (still have implicit inner types) */
display: block;       /* block block (default inner is block) */
display: flex;        /* block flex (outer is implicit block) */
display: grid;        /* block grid (outer is implicit block) */

/* Block elements */
div {
  display: block;
  /* Fills 100% of parent width */
  /* Stacks vertically with siblings */
  /* Respects width, height, margin, padding */
}

p {
  display: block;
}

h1, h2, h3 {
  display: block;
}

/* Change inline element to block */
.full-width-link {
  display: block;  /* now takes full width like a div */
}

/* Inline elements */
span {
  display: inline;
  /* Only takes needed width */
  /* Flows with text */
  /* Width/height ignored */
  /* Top/bottom margin ignored */
}

a, strong, em {
  display: inline;
}

/* Change block element to inline */
.inline-div {
  display: inline;  /* now flows with text */
  width: 200px;     /* ignored */
  height: 100px;    /* ignored */
  margin: 10px;     /* top/bottom ignored */
}

/* Inline-block — hybrid of block and inline */
button {
  display: inline-block;
  width: 120px;        /* width works */
  height: 40px;        /* height works */
  margin: 10px 5px;    /* all margins work */
  padding: 10px 20px;  /* padding works */
  /* Element flows inline but respects sizing */
}

/* Side-by-side elements with sizing */
.boxes {
  display: inline-block;
  width: 30%;
  margin: 10px;
  vertical-align: top;  /* align to top instead of baseline */
}

/* Navigation tabs */
.nav-tab {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #cccccc;
  margin-right: -1px;  /* overlap borders */
}

/* Flex container */
.flex-container {
  display: flex;
  /* Children arrange in a row by default */
}

/* Flex row (left to right) */
.row {
  display: flex;
  flex-direction: row;  /* default */
}

/* Flex column (top to bottom) */
.column {
  display: flex;
  flex-direction: column;
}

/* Distribute children with space */
.space-between {
  display: flex;
  justify-content: space-between;
  /* space is distributed between items */
}

/* Center children */
.centered {
  display: flex;
  align-items: center;    /* vertically center in row */
  justify-content: center; /* horizontally center */
}

/* Grid container */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* three columns */
  grid-template-rows: 100px auto 50px;  /* three rows */
  gap: 20px;  /* spacing between grid items */
}

/* Simple 3-column grid */
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Divides into 3 equal columns */
}

/* Responsive grid */
.responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Auto-creates columns that are at least 250px */
}

/* Completely hide element — removes from layout */
.hidden-none {
  display: none;
  /* Element not rendered, doesn't take space */
  /* Good for: truly hidden elements, modals off-screen */
}

/* Hide but preserve space */
.hidden-visibility {
  visibility: hidden;
  /* Element invisible but takes up space */
  /* Good for: toggles, temporary hiding */
}

/* Transparent but interactive */
.transparent {
  opacity: 0;
  /* Element invisible but still interactive */
  /* Good for: fade effects, invisible buttons */
}

/* Show element */
.visible {
  display: block;        /* show */
  visibility: visible;   /* show */
  opacity: 1;            /* fully opaque */
}

/* Default element display values */
<span>  →  display: inline
<div>   →  display: block
<button>→  display: inline-block
<ul>    →  display: block
<li>    →  display: list-item

/* Change any element's display */
.make-block {
  display: block;  /* span now behaves like a div */
}

.make-flex {
  display: flex;   /* div now uses flexbox */
}

.make-inline {
  display: inline; /* button now flows with text */
}

/* Responsive display changes */
.responsive-menu {
  display: flex;   /* menu on desktop */
}

@media (max-width: 768px) {
  .responsive-menu {
    display: block;  /* stacked on mobile */
  }
}