Các lượt nộp
    Danh sách bài
    Trang chủ
    Báo lỗi
    Chưa chọn file
    Đăng nhập
    Đăng nhập

    Đề bài: [Thiết kế Web] Gallery ảnh lớn và ảnh nhỏ

    📖Cần ôn lý thuyết? Đọc bài giảng Buổi 9: Thiết kế bố cục (2): Flexbox, Grid và thiết kế đáp ứng — khóa Thiết kế Web

    Cho HTML sau (khối .photo-grid chứa 5 thẻ img, ảnh đầu tiên có thêm class .hero).

    Viết CSS để:

    • .photo-grid dùng grid 4 cột x 2 hàng bằng nhau, gap 8px, mỗi hàng cao 120px
    • .hero phải chiếm 2 cột và 2 hàng (grid-column: span 2; grid-row: span 2), 4 ảnh còn lại mỗi ảnh chiếm đúng 1 ô
    • Tất cả img có object-fit: cover, width/height 100%

      Chủ đề

      🌐 Thiết kế WebThiết kế WebThiết kế Web: CSS — Grid & Đáp ứngTất cả môn học

      Thư Mục

      root
      index.html
      style.css
      script.js

      Chọn một file để chỉnh sửa hoặc tạo file mới

      Console

      Không có đầu ra