CSS Layout Techniques

1. The Box Model

Every element in CSS is a rectangular box. The Box Model describes the dimensions and spacing around an element. It consists of:

• Content: The actual content inside the element (e.g., text, images).
• Padding: The space between the content and the border. It is inside the element.
• Border: Surrounds the padding (if any) and content.
• Margin: The outermost space, which separates the element from others.

.element {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 15px;
}

2. Flexbox Layout

Flexbox is a layout model that allows you to design complex layouts in a simpler way, especially for aligning items inside a container.

• Flex Container: The parent element with display: flex.
• Flex Items: The child elements inside the container.

.container {
  display: flex;
  justify-content: space-between; /* Distribute items evenly */
  align-items: center; /* Align items vertically */
}

.item {
  flex: 1; /* Each item takes equal space */
}

3. Grid Layout

CSS Grid is a powerful two-dimensional layout system. It allows you to define rows and columns for your layout.

• Grid Container: The parent element with display: grid.
• Grid Items: The child elements inside the container.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
  gap: 10px; /* Space between grid items */
}

.item {
  background-color: lightgray;
}