Lesson 29-CSS3 Box Model and Layout

Center Alignment

Center Text

Horizontal Centering
Use the text-align: center; property to horizontally center inline elements (such as text, images, etc.) within a block-level element.

.parent {
    text-align: center;
}

Vertical Centering
Use line-height set to the same value as the container height to vertically center a single line of text.

.parent {
    height: 100px;
    line-height: 100px;
}

Horizontal Centering of Block-Level Elements

Use margin: auto;
For a block-level element of known width, setting margin-left and margin-right to auto will horizontally center it within the containing block.

.block-element {
    width: 200px;
    margin: 0 auto;
}

Use Flexbox
Set display: flex; for the parent element, and then use justify-content: center; to center the child element horizontally.

.parent {
    display: flex;
    justify-content: center;
}

.child {
/* Child element style */
}

Vertically center block-level elements

Use absolute positioning and negative margins
Set absolute positioning for the child element, and use top: 50%; to move its top edge to the center of the parent element, and then use negative transform: translateY(-50%); to move the element itself up by half of its own height to achieve vertical centering.

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Use Flexbox
Set display: flex; for the parent element, and then use align-items: center; to vertically center the child element.

.parent {
    display: flex;
    align-items: center;
}

.child {
/* Child element style */
}

Horizontally and vertically center block-level elements

Use Grid layout
Set display: grid; for the parent element, and then use place-items: center; or set align-items: center; and justify-content: center; to horizontally and vertically center the child element in the grid container.

.parent {
    display: grid;
    place-items: center;
}

/* Or set separately */
.parent {
    display: grid;
    align-items: center;
    justify-content: center;
}

.child {
/* Child element style */
}

Use Flexbox
Same as vertical centering, set align-items: center; and justify-content: center; to center the child element horizontally and vertically in the Flex container.

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

.child {
/* Child element style */
}

box-sizing

Purpose: It allows the width and height of the element to be adjusted according to the size of the content instead of being affected by margins and borders.

 .border-box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 10px solid #ccc;
      box-sizing: border-box; /* Overriding Defaults */
 }

display: flex

Purpose: Define the layout mode as flexible layout

display: grid

Purpose: Define the layout mode as grid layout

align-content

Purpose: Define the alignment between rows in a multi-line Flex layout. Only works when flex-wrap: wrap is set for the Flex container and there is extra space inside.

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px; /* Set enough height for the demo to accommodate multiple lines */
  align-content: space-between; /* Can be replaced with other values, such as stretch, center, flex-start, flex-end, space-around */
}

.flex-item {
  flex-basis: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

align-items

Purpose: Defines the alignment of all flex items in a flex container on the cross axis.

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
</div>

<style>
.flex-container {
  display: flex;
  height: 100px; /* Set enough height for the demo to show the alignment effect */
  align-items: flex-end; /* Can be replaced with other values, such as stretch, center, flex-start, baseline */
}

.flex-item {
  flex-basis: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

align-self

Purpose: Allows a single flex item to override the align-items setting of its parent container, thereby achieving independent alignment.

<div class="flex-container">
  <div class="flex-item self-align-center">Item 1</div>
  <div class="flex-item self-align-flex-end">Item 2</div>
  <!-- More Flex Items -->
</div>

<style>
.flex-container {
  display: flex;
  height: 100px; /* Set enough height for the demo to show the alignment effect */
  align-items: flex-start; /* Default alignment of the parent container */
}

.flex-item {
  flex-basis: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}

.self-align-center {
  align-self: center;
}

.self-align-flex-end {
  align-self: flex-end;
}
</style>

flex

Purpose: Shorthand property for setting the values ​​of flex-grow, flex-shrink, and flex-basis. You can use the form of flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ].

<div class="flex-container">
  <div class="flex-item grow-only">Item 1</div>
  <div class="flex-item shrink-only">Item 2</div>
  <div class="flex-item basis-auto">Item 3</div>
</div>

<style>
.flex-container {
  display: flex;
  width: 600px; /* Set a fixed width for the demo */
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}

.grow-only {
    flex: 1 0 auto; /* Set flex-grow: 1, do not participate in shrinkage (flex-shrink: 0), flex-basis: auto */
}

.shrink-only {
    flex: 0 1 200px; /* Set flex-grow: 0, participate in shrinkage (flex-shrink: 1), flex-basis: 200px */
}

.basis-auto {
    flex: 0 0 auto; /* Set flex-grow: 0, do not participate in shrinkage (flex-shrink: 0), flex-basis: auto */
}
</style>

flex-basis

Purpose: Defines the initial size of the flex item in the main axis direction. It can be a length value (such as px, em, %), auto or content.

<div class="flex-container">
  <div class="flex-item basis-auto">Item 1</div>
  <div class="flex-item basis-content">Item 2</div>
  <div class="flex-item basis-fixed">Item 3</div>
</div>

<style>
.flex-container {
  display: flex;
  width: 600px; /* Set a fixed width for the demo */
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}

.basis-auto {
  flex-basis: auto; /* Automatically determine initial size based on content */
}

.basis-content {
  flex-basis: content; /* In browsers that support this value, the initial size is automatically determined based on the content */
}

.basis-fixed {
  flex-basis: 200px; /* The initial size is 200px */
}
</style>

flex-direction

Purpose: Defines the arrangement direction of flex items in a flex container.

.flex-container {
  display: flex;
  margin-bottom: 10px;
  flex-direction: row; /* Arrange flex items horizontally */
  flex-direction: column; /* Arrange flex items vertically */
}

flex-flow

Purpose: Shorthand property used to set the values ​​of flex-direction and flex-wrap. You can use the form of flex-flow: <‘flex-direction’> || <‘flex-wrap’>.

<div class="flex-container row-wrap">Row Wrap
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container column-no-wrap">Column No Wrap
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<style>
.flex-container {
  display: flex;
  margin-bottom: 10px;
}

.row-wrap {
  flex-flow: row wrap; /* Arrange flex items horizontally, allowing line breaks */
}

.column-no-wrap {
  flex-flow: column nowrap; /* Arrange flex items vertically without line breaks */
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

flex-grow

Purpose: Defines the stretch factor of the Flex item in the main axis direction and determines the enlargement ratio of the Flex item in the remaining space.

<div class="flex-container">
  <div class="flex-item grow-1">Item 1</div>
  <div class="flex-item grow-2">Item 2</div>
  <div class="flex-item grow-3">Item 3</div>
</div>

<style>
.flex-container {
  display: flex;
  width: 600px; /* Set a fixed width for the demo */
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}

.grow-1 {
  flex-grow: 1;
}

.grow-2 {
  flex-grow: 2;
}

.grow-3 {
  flex-grow: 3;
}
</style>

flex-shrink

Purpose: Defines the shrinkage factor of the Flex item in the main axis direction, and determines the shrinkage ratio of the Flex item when there is insufficient space. The larger the value, the higher the shrinkage ratio of the Flex item.

<div class="flex-container">
  <div class="flex-item shrink-1">Item 1</div>
  <div class="flex-item shrink-2">Item 2</div>
  <div class="flex-item shrink-3">Item 3</div>
</div>

<style>
.flex-container {
  display: flex;
  width: 300px; /* Set a smaller width for the demo, triggering shrink */
  overflow: hidden; /* Avoid content overflow */
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}

.shrink-1 {
  flex-shrink: 1;
}

.shrink-2 {
  flex-shrink: 2;
}

.shrink-3 {
  flex-shrink: 3;
}
</style>

flex-wrap

Purpose: Defines whether the Flex item wraps and the wrap direction. The optional values ​​are nowrap (default, no wrap), wrap (wrap, the first line is above or to the left), and wrap-reverse (wrap, the first line is below or to the right).

<div class="flex-container nowrap">No Wrap
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container wrap">Wrap
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container wrap-reverse">Wrap Reverse
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<style>
.flex-container {
  display: flex;
  width: 300px; /* Set a smaller width for the demo to trigger line break */
  margin-bottom: 10px;
}

.nowrap {
  flex-wrap: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

.wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

justify-content

Purpose: Defines the alignment of flex items in the main axis direction of the flex container. The optional values ​​are flex-start (default, aligned from the start position), flex-end (aligned from the end position), center (center alignment), space-between (aligned at both ends, equal spacing between items), space-around (equal spacing on both sides of the item) and space-evenly (equal spacing between items and between items and container edges).

<div class="flex-container justify-start">Justify Start
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container justify-end">Justify End
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container justify-center">Justify Center
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container justify-between">Justify Between
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container justify-around">Justify Around
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<div class="flex-container justify-evenly">Justify Evenly
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <!-- More Flex Items -->
</div>

<style>
.flex-container {
  display: flex;
  width: 600px; /* Set a fixed width for the demo */
  margin-bottom: 10px;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}
</style>

order

Purpose: Defines the order of flex items in a flex container. The default value is 0. The smaller the value, the higher the order; the larger the value, the lower the order. Different flex items can have different order values ​​to achieve custom sorting.

<div class="flex-container">
  <div class="flex-item order-3">Item 1 (Order 3)</div>
  <div class="flex-item order-1">Item 2 (Order 1)</div>
  <div class="flex-item order-2">Item 3 (Order 2)</div>
</div>

<style>
.flex-container {
  display: flex;
  width: 600px; /* Set a fixed width for the demo */
}

.flex-item {
  margin: 5px;
  background-color: #f0f0f0;
  text-align: center;
}

.order-3 {
  order: 3;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}
</style>

grid

display: grid

Purpose: Convert a container to a grid container and enable grid-based layout.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <!-- More Grid Items -->
</div>

<style>
.grid-container {
  display: grid; /* Convert a container to a grid container */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

grid-area

Purpose: Defines the area name of a grid item (for grid-template-areas) or directly specifies the range of rows and columns it spans.

<div class="grid-container">
  <div class="grid-item item-a">Item A</div>
  <div class="grid-item item-b">Item B</div>
  <div class="grid-item item-c">Item C</div>
  <div class="grid-item item-d">Item D</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "item-a item-b item-c"
    "item-a item-d item-c";
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

.item-a {
  grid-area: 1 / 1 / 3 / 2; /* Row Start / Column Start / Row End / Column End */
}

.item-b {
  grid-area: item-b; /* Use Region Name */
}

.item-c {
  grid-area: item-c; /* Use Region Name */
}

.item-d {
  grid-area: item-d; /* Use Region Name */
}
</style>

grid-auto-columns and grid-auto-rows

Purpose: Defines the size of new rows or columns that are automatically created by the grid when no explicit grid size is specified.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <!-- More Grid Items -->
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-columns: 100px; /* The width of the automatically created new column is 100px */
  grid-auto-rows: minmax(50px, auto); /* The minimum height of the automatically created new row is 50px, automatically adapting to the content height */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

grid-auto-flow

Purpose: Defines how grid items automatically fill the grid layout. Optional values ​​are row (default, fill by row), column (fill by column), and dense (dense filling, try to reduce blank area).

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <!-- More Grid Items -->
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: column; /* Fill grid items by columns */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

grid-column and grid-row

Purpose: Shorthand property for setting grid-column-start, grid-column-end (for grid-column) or grid-row-start, grid-row-end (for grid-row) at the same time.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <!-- More Grid Items -->
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

.grid-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.grid-item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.grid-item:nth-child(3) {
  grid-column: 1 / 7;
  grid-row: 2 / 3;
}
</style>

grid-column-end, grid-column-gap, grid-column-start, grid-gap, grid-row-end, grid-row-gap, grid-row-start

Purpose:

  • grid-column-end: Defines the column where the grid item ends.
  • grid-column-gap: Defines the gap between grid columns.
  • grid-column-start: Defines the column where the grid item starts.
  • grid-gap: Shorthand property, sets both grid-row-gap and grid-column-gap.
  • grid-row-end: Defines the row where the grid item ends.
  • grid-row-gap: Defines the gap between grid rows.
  • grid-row-start: Defines the row where the grid item starts.
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <!-- More Grid Items -->
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px; /* Set row and column spacing at the same time */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

.grid-item:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.grid-item:nth-child(2) {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.grid-item:nth-child(3) {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 2;
  grid-row-end: 3;
}

.grid-item:nth-child(4) {
  grid-column-start: 9;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}
</style>

grid-template

Purpose: Shorthand property for setting grid-template-rows, grid-template-columns, and grid-template-areas at the same time.

<div class="grid-container">
  <div class="grid-item item-a">Item A</div>
  <div class="grid-item item-b">Item B</div>
  <div class="grid-item item-c">Item C</div>
  <div class="grid-item item-d">Item D</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template:
    "item-a item-b item-c" 1fr
    "item-a item-d item-c" 1fr;
  grid-gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

.item-a {
  grid-area: item-a;
}

.item-b {
  grid-area: item-b;
}

.item-c {
  grid-area: item-c;
}

.item-d {
  grid-area: item-d;
}
</style>

grid-template-areas

Purpose: Defines the area in the grid layout and uses a string template to assign grid items to the corresponding area.

<div class="grid-container">
  <div class="grid-item item-a">Item A</div>
  <div class="grid-item item-b">Item B</div>
  <div class="grid-item item-c">Item C</div>
  <div class="grid-item item-d">Item D</div>
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "item-a item-b item-c"
    "item-a item-d item-c";
  grid-gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}

.item-a {
  grid-area: item-a;
}

.item-b {
  grid-area: item-b;
}

.item-c {
  grid-area: item-c;
}

.item-d {
  grid-area: item-d;
}
</style>

grid-template-columns and grid-template-rows

Purpose: Defines the size, number, and pattern of columns and rows in a grid layout, respectively.

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <!-- More Grid Items -->
</div>

<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Define three columns with a width ratio of 1:2:1 */
  grid-template-rows: 50px auto 1fr; /* Define three rows, the first row is 50px, the second row automatically adapts to the content height, and the third row is 1fr of the remaining space */
  grid-gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

column

column-count

Purpose: Defines how many columns the element should be split into.

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3; /* Divide the content into 3 columns */
  column-gap: 20px; /* Set the spacing between columns */
}

.multi-column-container p {
  margin: 0; /* Remove default paragraph margins */
}
</style>

column-fill

Purpose: Defines how columns are filled when there is too much content. The optional values ​​are auto (default, columns may not distribute content evenly, and the first column is filled first) and balance (distribute content as evenly as possible).

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
  column-fill: balance; /* Distribute content as evenly as possible */
}

.multi-column-container p {
  margin: 0;
}
</style>

column-gap

Purpose: Defines the spacing between columns.

column-rule

Purpose: A shorthand property for setting column-rule-width, column-rule-style, and column-rule-color at the same time.

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 2px dashed #333; /* Set width, style and color at the same time */
}

.multi-column-container p {
  margin: 0;
}
</style>

column-rule-color

Purpose: Defines the color of column rule lines.

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
  column-rule-width: 2px;
  column-rule-style: dashed;
  column-rule-color: #333; /* Setting Color */
}

.multi-column-container p {
  margin: 0;
}
</style>

column-rule-style

Purpose: Defines the style of column rule lines. Optional values ​​include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, etc.

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
  column-rule-width: 2px;
  column-rule-style: dotted; /* Setting the style */
  column-rule-color: #333;
}

.multi-column-container p {
  margin: 0;
}
</style>

column-rule-width

Purpose: Defines the width of column rule lines.

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-color: #333;
  column-rule-width: 2px; /* Set Width */
}

.multi-column-container p {
  margin: 0;
}
</style>

column-span

Purpose: Defines the number of columns an element should span. The optional value is none (default, not spanning any columns) or a non-negative integer.

<div class="multi-column-container">
  <h2 class="column-span-header">Header Spanning All Columns</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
}

.multi-column-container p {
  margin: 0;
}

.column-span-header {
  column-span: all; /* Make the header span all columns */
}
</style>

column-width

Purpose: Defines the preferred width of a column. If column-count is not specified or the calculated result is less than the number of columns required by the actual content, the browser will adjust the column width based on the content.

<div class="multi-column-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<style>
.multi-column-container {
  column-width: 200px; /* Set column width */
  column-gap: 20px;
}

.multi-column-container p {
  margin: 0;
}
</style>

break-after

Purpose: Specifies whether a forced line break (in multi-column layout) or page break (in paged media) should be inserted after the element. Applicable to block-level elements and inline elements that generate block-level boxes.

Optional values:

  • auto: The default value, allowing the browser to determine the best place to break a line or page.
  • avoid: Avoid breaking a line or page after the element when possible.
  • always: Always break a line or page after the element.
  • all: Force a line break or page break on all media types.
  • avoid-page: Avoid breaking a page after the element when possible in paged media.
  • page: Always break a page after the element in paged media.
  • avoid-column: Avoid breaking a column after the element when possible in multi-column layout.
  • column: Always break a column after the element in multi-column layout.
  • avoid-region: Avoid breaking a region after the element when possible in CSS Regions layout.
  • region: Always break a region after the element in CSS Regions layout.
<div class="multi-column-container">
  <div class="content-block">Block 1</div>
  <div class="content-block">Block 2</div>
  <div class="content-block">Block 3</div>
  <div class="content-block break-after-always">Block 4 (forced break after)</div>
  <div class="content-block">Block 5</div>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
}

.content-block {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
}

.break-after-always {
  break-after: always; /* Force a column break after this element */
}
</style>

break-before

Purpose: Specifies whether a forced line break (in multi-column layout) or page break (in paged media) should be inserted before the element. Applicable to block-level elements and inline elements that generate block-level boxes.

The optional values ​​are the same as break-after.

<div class="multi-column-container">
  <div class="content-block">Block 1</div>
  <div class="content-block break-before-always">Block 2 (forced break before)</div>
  <div class="content-block">Block 3</div>
  <div class="content-block">Block 4</div>
  <div class="content-block">Block 5</div>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
}

.content-block {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
}

.break-before-always {
  break-before: always; /* Force a column break before this element */
}
</style>

break-inside

Purpose: Specifies whether line or page breaks should be avoided within an element. Applicable to block-level elements and inline elements that generate block-level boxes.

Optional values:

  • auto: The default value, allowing the browser to determine the best position for line or page breaks.
  • avoid: Avoid line or page breaks within an element as much as possible.
  • avoid-page: Avoid page breaks within an element as much as possible in paged media.
  • avoid-column: Avoid column breaks within an element as much as possible in multi-column layouts.
  • avoid-region: Avoid region breaks within an element as much as possible in CSS Regions layouts.
<div class="multi-column-container">
  <div class="content-block">Block 1</div>
  <div class="content-block avoid-break">Block 2 (avoid breaking inside)</div>
  <div class="content-block">Block 3</div>
  <div class="content-block">Block 4</div>
  <div class="content-block">Block 5</div>
</div>

<style>
.multi-column-container {
  column-count: 3;
  column-gap: 20px;
}

.content-block {
  background-color: #f0f0f0;
  padding: 10px;
  margin-bottom: 10px;
}

.avoid-break {
  break-inside: avoid; /* Avoid column wrapping within this element */
}
</style>
Course: Master HTML5 and CSS3: From Beginner to Advanced Developer
Share your love

Trending now

Exploring Web 3D Core Technologies Development
WebRTC Advanced Guide：Media, Transport & Architecture
WebSocket Deep Guide：Building High-Performance Realtime Systems
Micro Frontends & Serverless: Modular Web Development