How To Split The Table Of Contents Into Two Columns With CSS

In this tutorial, we will discuss how to split a table of content into two columns using CSS, specifically focusing on desktop screens:

A table of content is an essential element in long documents or articles, aiding readers in navigating through the content more efficiently. By organizing the content into sections or chapters, readers can quickly locate the information they seek.

In this article, we’ll explore how to split a table of content into two columns using CSS, specifically targeting desktop screens.

Before we dive into the code, let’s take a moment to understand the concept behind this implementation. By dividing the table of content into two columns, we can utilize the available space more effectively on larger screens, enhancing readability and making better use of the screen real estate.

Let’s start by setting up the HTML structure for our table of content:

<div class="table-of-content">
  <ul>
    <li>Chapter 1</li>
    <li>Chapter 2</li>
    <li>Chapter 3</li>
    <li>Chapter 4</li>
    <li>Chapter 5</li>
    <li>Chapter 6</li>
    <li>Chapter 7</li>
    <li>Chapter 8</li>
    <li>Chapter 9</li>
    <li>Chapter 10</li>
  </ul>
</div>

In this example, we’ve wrapped our table of contents within an <div> element with a class of “table-of-content”. Inside, we have an unordered list (<ul>) containing individual list items (<li>), representing the chapters or sections of our content.

CSS Code That Splits TOC Into Two Columns

Now, let’s move on to the CSS part and apply the necessary styles to achieve the desired two-column layout on desktop screens:

.table-of-content ul {
  column-count: 1; /* Single column by default */

  /* Media query for desktop screens */
  @media (min-width: 768px) {
    column-count: 2; /* Split into two columns on desktop */
    column-gap: 20px; /* Adjust the gap between columns as needed */
  }
}

In the CSS code, we first set the default column-count property to 1, ensuring that the table of contents appears as a single column by default, suitable for smaller screens.

To create the two-column layout on desktop screens, we utilize a media query. The media query is defined using @media and specifies a minimum screen width of 768 pixels using (min-width: 768px). Adjust this value if you want the two-column layout to trigger at a different breakpoint.

Within the media query block, we override the column-count property and set it to 2. This splits the content into two columns, allowing for more efficient use of space on larger screens.

Additionally, we specify the column-gap property to set a 20-pixel gap between the columns. You can modify this value according to your preferences or design requirements.

By implementing this CSS code, the table of contents will be displayed as a single column on smaller screens, ensuring readability and maintaining the integrity of the content structure.

On desktop screens, the table of contents will be split into two columns, optimizing space utilization and enhancing the overall browsing experience.

Feel free to customize the HTML structure and CSS class names as per your project’s needs. Remember to test the layout on various screen sizes to ensure it functions as intended.

In conclusion, utilizing CSS properties such as column-count and column-gap along with media queries enables us to create a responsive and user-friendly two-column table of content for desktop screens. This