CSS Layout

CSS provides several methods for creating layouts and positioning elements.

Display Property

/* Block elements take full width */
.block {
  display: block;
  width: 100%;
  background-color: lightblue;
}

/* Inline elements flow with text */
.inline {
  display: inline;
  background-color: yellow;
}

/* Inline-block combines both */
.inline-block {
  display: inline-block;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
}

/* Hide elements */
.hidden {
  display: none;
}

Flexbox Layout

Flex Container

.flex-container {
  display: flex;
  
  /* Direction */
  flex-direction: row; /* row, column, row-reverse, column-reverse */
  
  /* Wrap */
  flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */
  
  /* Justify content (main axis) */
  justify-content: center; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  
  /* Align items (cross axis) */
  align-items: center; /* flex-start, flex-end, center, stretch, baseline */
  
  /* Gap between items */
  gap: 20px;
}

Flex Items

.flex-item {
  /* Grow factor */
  flex-grow: 1;
  
  /* Shrink factor */
  flex-shrink: 1;
  
  /* Base size */
  flex-basis: 200px;
  
  /* Shorthand */
  flex: 1 1 200px; /* grow shrink basis */
  
  /* Individual alignment */
  align-self: flex-end;
}

Grid Layout

Grid Container

.grid-container {
  display: grid;
  
  /* Define columns */
  grid-template-columns: 1fr 2fr 1fr; /* or 200px auto 100px */
  
  /* Define rows */
  grid-template-rows: 100px auto 50px;
  
  /* Gap between grid items */
  gap: 20px;
  
  /* Shorthand for rows and columns */
  grid-template: 100px auto 50px / 1fr 2fr 1fr;
}

Grid Items

.grid-item {
  /* Span multiple columns */
  grid-column: 1 / 3; /* from line 1 to line 3 */
  
  /* Span multiple rows */
  grid-row: 2 / 4;
  
  /* Shorthand */
  grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
}

/* Named grid areas */
.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Positioning

/* Static (default) */
.static {
  position: static;
}

/* Relative to normal position */
.relative {
  position: relative;
  top: 10px;
  left: 20px;
}

/* Relative to nearest positioned ancestor */
.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

/* Relative to viewport */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

/* Sticky positioning */
.sticky {
  position: sticky;
  top: 0;
}

Float and Clear

/* Float elements */
.float-left {
  float: left;
  margin-right: 20px;
}

.float-right {
  float: right;
  margin-left: 20px;
}

/* Clear floats */
.clear {
  clear: both;
}

/* Clearfix for containers */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Responsive Layout

/* Mobile first approach */
.container {
  width: 100%;
  padding: 0 15px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

/* Grid responsive */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Modern CSS layout techniques make creating responsive designs easier than ever!