Grid Layout | BestHub

政采云技术

Oct 11, 2023 · Frontend Development

A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features

This article introduces React Grid Layout, explains how to install and configure it, and provides detailed implementations of responsive breakpoint layouts, grid positioning, component rendering, drag‑and‑drop handling, and resizing logic, complete with code examples and performance considerations.

Grid LayoutReactResize

0 likes · 20 min read

A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features

Bilibili Tech

Dec 6, 2022 · Frontend Development

Redesigning Bilibili PC Web: Front‑end Architecture, Vue3 SSR, Grid Layout and Performance Optimization

In early 2021 senior engineer Liu Lei led a complete redesign of Bilibili’s PC homepage, adopting Vue 3 with a custom SSR/CSR hybrid, responsive grid layouts via CSS grid and flex, theme variables, monorepo tooling, and extensive performance tweaks—boosting the page’s score dramatically while preserving hackability and supporting both narrow and ultra‑wide screens.

Front-end ArchitectureGrid LayoutPerformance Optimization

0 likes · 12 min read

Redesigning Bilibili PC Web: Front‑end Architecture, Vue3 SSR, Grid Layout and Performance Optimization

vivo Internet Technology

Aug 26, 2020 · Frontend Development

Adaptive Grid Layout Solutions for Management Backend Pages

To solve inconsistent PC resolutions and the lack of multiple design drafts in backend management pages, we evaluated fixed‑width, fixed‑count, Material Design, and custom grids, then built a reusable adaptive‑grid component that recalculates card width, margin, and padding on resize using CSS variables, delivering responsive card‑lists while minimizing design overhead.

CSS variablesComponentGrid Layout

0 likes · 16 min read

Adaptive Grid Layout Solutions for Management Backend Pages