Concept

Fluid Grids (also known as liquid grids) is a CSS technique that allows us to create flexible layouts based on percentage ratios, instead of rigid pixel units. This technique allows the components of the website to resize according to the percentage ratio of the screen, thereby making the website look better on different devices.

Applying

To apply Fluid Grids to your website, you need to follow these steps:

Determining the percentage ratio for the grid

First, you need to determine the percentage ratio for the grid of the website. For example, if you want to divide the website layout into 12 equal columns, you can use a ratio of 1/12 (8.33%) for each column.

Packaging components into columns

After determining the percentage ratio for the grid, you can pack the components of the website into corresponding columns. You can use CSS classes to divide the components into desired columns.

<div class="container">
  <div class="row">
    <div class="col-4">
      <!-- Nội dung cột 1 -->
    </div>
    <div class="col-4">
      <!-- Nội dung cột 2 -->
    </div>
    <div class="col-4">
      <!-- Nội dung cột 3 -->
    </div>
  </div>
</div>

Using responsive CSS

To ensure that your website adapts to various screen sizes, you should use responsive CSS. This may include using media queries to change the percentage ratio for the grid or adjusting other components of the website.

/* Ví dụ về responsive CSS */
@media screen and (max-width: 768px) {
  .col-4 {
    width: 50%;
  }
}

Benefits of Fluid Grids

Using Fluid Grids in CSS brings many benefits to website development, including:

• Responsive: The website will display well on various devices and screen sizes.
• Easy integration: Fluid Grids can be easily integrated into CSS frameworks like Bootstrap or Foundation.
• Time-saving: When applying Fluid Grids, you don't need to redesign the layout for each screen size.