Bài 41: Cách sử dụng Website Layout trong css

Cách sử dụng Website Layout trong css

Website layout là một phần quan trọng trong thiết kế web, cho phép xác định cách các phần tử trên trang web được sắp xếp và bố trí. CSS cung cấp nhiều cách để xây dựng website layout, bao gồm sử dụng float, flexbox và grid.

1. Sử dụng float: Float là một thuộc tính CSS cho phép tạo một layout dựa trên việc đẩy các phần tử về phía trái hoặc phải của phần tử cha.

Ví dụ:

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  width: 30%;
  float: left;
  margin-right: 3%;
}

.box:last-child {
  margin-right: 0;
}

Trong đó, float: left được sử dụng để đẩy các phần tử về phía trái, và margin-right được sử dụng để tạo khoảng cách giữa các phần tử. last-child được sử dụng để xác định phần tử cuối cùng và loại bỏ margin phải.

2. Sử dụng flexbox: Flexbox là một thuộc tính CSS cho phép tạo một layout linh hoạt và dễ dàng điều chỉnh các phần tử trên trang web.

Ví dụ:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 30%;
  height: 200px;
  margin-bottom: 20px;
}

Trong đó, display: flex được sử dụng để tạo một container sử dụng flexbox. flex-wrap: wrap được sử dụng để xác định khi các phần tử quá rộng để hiển thị trên một dòng, chúng sẽ được xếp xuống dòng mới. justify-content: space-between được sử dụng để đặt khoảng cách giữa các phần tử.

3. Sử dụng grid: Grid là một thuộc tính CSS cho phép tạo một layout đồng nhất và đáp ứng trên các thiết bị khác nhau.

Ví dụ:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.box {
  height: 200px;
}

Trong đó, display: grid được sử dụng để tạo một container sử dụng grid. grid-template-columns: repeat(3, 1fr) được sử dụng để xác định số lượng cột và kích thước của chúng. grid-gap được sử dụng để tạo khoảng cách giữa các phần tử.

Lưu ý rằng các phương pháp này có thể được kết hợp với nhau để tạo ra một layout tốt hơn và đáp ứng được các yêu cầu thiết kế của trang web.