PHONG FOUNDATION

created by Phong

Gallery Grid Layout

Quay trở lại Trang Snippets chính

Gallery Grid Layout là layout thể hiện dữ liệu dạng lưới. Tương tự như Grid Layout mà bạn thấy trong ứng dụng Photos trên iPhone hay Instagram vậy. Các ảnh sẽ được hiển thị dưới dạng cover trong 1 ô vuông.

Gallery Grid Layout sử dụng style-components để layout các đối tượng bên trong Grid. Hiện tại thì TailwindCSS chưa có đủ hỗ trợ các tính năng đặc biệt của CSS như ::before ::after nên chưa có giải pháp phù hợp để làm điều này. Hoặc là do mình chưa tìm ra 😆

Phong sẽ cập nhật cho TailwindCSS sau, hiện tại vẫn dùng style-components chỉ để làm cái Gallery Grid Layout này. Phần /Inspiration của Archillect và Hashflags là sử dụng Grid Layout này.

import styled from "styled-components";

export default function GalleryGridLayout() {
  return (
    <Wrapper>
      {data.map((dt) => (
        <ElementWrapper>
          <ImageProject>
            <img src={e.img} />
          </ImageProject>
        </ElementWrapper>
      ))}
    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  grid-gap: 0px;
  z-index: 10;
`;

const ElementWrapper = styled.div`
  position: relative;
  ::before {
    content: "";
    display: block;
    padding-top: 100%;
  }
`;

const ImageProject = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 50;
`;

Điều chỉnh phần minmax trong grid-template-columns để có được số column trong grid theo mong muốn.