This article aims to solve the limitations of traditional table layout in HTML when implementing complex multi-column structures. We will delve into how to use CSS Grid, a powerful layout module, to efficiently organize and arrange multiple sub-columns under a single logical column, thereby creating a more flexible and responsive page layout, getting rid of the limitations of the old table layout, and improving development efficiency and maintainability.

Introduction: Say goodbye to the limitations of table layout

In web layout design, developers are often faced with the need to organize multiple elements into a clear and orderly column structure. Traditionally, many people are used to using HTML's

Modern web development recommends using CSS layout modules, especially CSS Grid and Flexbox, to build complex page structures. As a two-dimensional layout system, CSS Grid can control rows and columns at the same time, providing an elegant and powerful solution for realizing complex layouts such as "multiple sub-columns under a single logical column".

Understand the concept of "multiple subcolumns under a single logical column"

"Multiple sub-columns under a single logical column" usually means that in the overall layout of the page, there is an area (can be regarded as a main column or a block) occupying a specific position or width, and this area is subdivided into multiple sub-columns to organize content. For example, in a form, you may have an overall area of ??"Contact Information". This area may only occupy one "large column" in the main layout, but it contains three side-by-side sub-columns of "Last Name", "First Name", and "Middle Name".

The advantages of this layout pattern are:

• Clear structure: Content is logically grouped and easy to understand and maintain.
• Visual organization: Helps users quickly identify relevant information.
• Flexibility: It is convenient to adjust the arrangement of sub-columns under different screen sizes.

CSS Grid Basics: The cornerstone of building flexible layouts

CSS Grid layout is enabled by setting display: grid on the container element and allows developers to define the rows and columns of the grid. Here are a few core properties:

• display: grid;: Defines the element as a grid container.
• grid-template-columns;: Defines the column tracks of the grid. You can simplify the definition of repeating columns using fixed values ??(such as px, em, rem), percentages, fr units (a fraction of available space), or the repeat() function.
• grid-template-rows;: Define the row tracks of the grid.
• gap (or grid-gap): Defines the spacing between grid rows and columns.
• grid-column / grid-row: used to position the starting and ending positions of grid items in the grid.

Implementation strategy: Nested Grid structure

To achieve the "multiple sub-columns under a single logical column" layout, the most direct and recommended way is to use a nested Grid . This means that a grid item can itself become another grid container.

1. Main grid container: Defines the overall layout of the page, such as dividing the form area into multiple main columns.
2. Logical columns (grid items): In the main grid, create a grid item for the area that needs to contain multiple sub-columns.
3. Subgrid Container: Redefine the content inside this grid item as an independent grid container and set the desired subcolumn layout for it.

Sample code: Convert form to Grid layout

Let's say we have a form with multiple input fields and we want to organize the three fields "Last Name", "Middle Name", "First Name" under a logical group (for example "Name") and have them appear side by side.

First, let's look at a simplified form structure based on the traditional

Now, we use CSS Grid to reconstruct this form to achieve a more flexible layout, especially organizing "last name", "middle name", and "first name" as sub-columns in a logical group.

HTML structure (using divs and semantic tags)

We will use div elements instead of

 /*Basic style, can be adjusted according to your CSS framework (such as Bootstrap)*/
.form-control {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensure padding and border do not increase the total width of the element*/
}

.btn-primary {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #0056b3;
}

/* Main grid container */
.form-grid-wrapper {
    display: grid;
    /* Define 4 columns, each column has the same width*/
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; /* Spacing between columns and rows*/
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}

/* Style of a single form group*/
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0; /* Let the grid's gap handle the spacing*/
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* The style of the name details area. It is a main grid item, but it is also a grid container inside itself */
.name-details-section {
    grid-column: 1 / -1; /* Make this fieldset span all main grid columns*/
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px; /* Spacing from other main grid items*/
}

.name-details-section legend {
    font-size: 1.2em;
    font-weight: bold;
    padding: 0 10px;
    color: #333;
}

/* Internal grid container of name field (implementing 3 sub-columns) */
.name-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Define 3 equal-width subcolumns*/
    gap: 15px; /* Spacing between sub-columns*/
    margin-top: 10px;
}

/* Submit button area*/
.form-actions {
    text-align: right;
    padding: 0 20px 20px;
}

/* Responsive adjustment*/
@media (max-width: 768px) {
    .form-grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Reduce the number of columns on small screens*/
    }
    .name-fields-grid {
        grid-template-columns: 1fr; /* On small screens, the name subcolumn becomes a single stacked column*/
    }
}

The above is the detailed content of HTML layout: Use CSS Grid to implement multiple sub-column organization under a single logical column. For more information, please follow other related articles on the PHP Chinese website!