CSS Layout and Positioning

/* Common display values */

/* Block elements take full width and stack vertically */
.block {
  display: block;
}

/* Inline elements flow horizontally and wrap */
.inline {
  display: inline;
}

/* Combines block and inline features */
.inline-block {
  display: inline-block;
  width: 150px;  /* Can have width/height unlike inline */
  height: 80px;
}

/* Hides the element completely */
.none {
  display: none;
}

/* Visually hidden but still takes up space */
.invisible {
  visibility: hidden;
}

/* Makes element a flex container */
.flex-container {
  display: flex;
}

/* Makes element a grid container */
.grid-container {
  display: grid;
}

/* Makes element behave like a table */
.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

/* CSS Positioning */

/* Default positioning in normal document flow */
.static {
  position: static;
}

/* Positioned relative to its normal position */
.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

/* Positioned relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 50px;
  right: 10px;
}

/* Positioned relative to the viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Toggles between relative and fixed based on scroll position */
.sticky {
  position: sticky;
  top: 0;
}

/* Z-index controls stacking order of positioned elements */
.stacked {
  position: relative;
  z-index: 10;
}

/* Basic Flexbox Container Properties */
.flex-container {
  display: flex;
  
  /* Direction: row (default), row-reverse, column, column-reverse */
  flex-direction: row;
  
  /* Wrapping: nowrap (default), wrap, wrap-reverse */
  flex-wrap: wrap;
  
  /* Shorthand for direction + wrap */
  flex-flow: row wrap;
  
  /* Main axis alignment: flex-start, flex-end, center, space-between, space-around, space-evenly */
  justify-content: space-between;
  
  /* Cross axis alignment: stretch (default), flex-start, flex-end, center, baseline */
  align-items: center;
  
  /* Multi-line alignment: stretch (default), flex-start, flex-end, center, space-between, space-around */
  align-content: stretch;
}

/* Flexbox Item Properties */
.flex-item {
  /* Growth factor (default: 0) */
  flex-grow: 1;
  
  /* Shrink factor (default: 1) */
  flex-shrink: 1;
  
  /* Base size (default: auto) */
  flex-basis: 200px;
  
  /* Shorthand for grow, shrink, basis */
  flex: 1 1 auto;
  
  /* Individual alignment overriding container's align-items */
  align-self: flex-start;
  
  /* Controls order (default: 0) */
  order: 2;
}

/* Basic Grid Container Properties */
.grid-container {
  display: grid;
  
  /* Define columns (3 columns of 1fr each) */
  grid-template-columns: 1fr 1fr 1fr;
  
  /* Alternative using repeat() */
  grid-template-columns: repeat(3, 1fr);
  
  /* Define rows */
  grid-template-rows: 100px auto 100px;
  
  /* Gap between grid items */
  gap: 20px;
  /* Or individually: */
  column-gap: 20px;
  row-gap: 10px;
  
  /* Named grid areas */
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  
  /* Auto-fit and minmax for responsive grids */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
  /* Alignment of all items within cells */
  justify-items: center;
  align-items: center;
  
  /* Alignment of the grid within container */
  justify-content: center;
  align-content: center;
}

/* Grid Item Properties */
.grid-item {
  /* Span multiple columns */
  grid-column: 1 / 3;
  /* Shorthand for grid-column-start / grid-column-end */
  
  /* Span multiple rows */
  grid-row: 2 / 4;
  
  /* Using named lines or span keyword */
  grid-column: span 2;
  
  /* Placing item in a named area */
  grid-area: header;
  
  /* Aligning individual item within its cell */
  justify-self: end;
  align-self: center;
}

/* Responsive Design Techniques */

/* Media Queries */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
}

/* Mobile-first approach */
.card {
  width: 100%; /* Default for small screens */
}

@media screen and (min-width: 576px) {
  .card {
    width: 48%; /* Medium screens */
  }
}

@media screen and (min-width: 992px) {
  .card {
    width: 30%; /* Large screens */
  }
}

/* Fluid Typography */
html {
  font-size: calc(14px + 0.25vw);
}

/* Viewport Units */
.hero {
  height: 80vh;
  padding: 2vw;
}

/* Container Queries (modern browsers) */
@container (min-width: 400px) {
  .card-content {
    display: flex;
  }
}