BestHub
Sign in
Tagged articles
11 articles
Page 1 of 1
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 23, 2025 · Frontend Development

Comprehensive Guide to CSS Grid Layout: Responsive Design, Implicit/Explicit Grids, Alignment, and Advanced Techniques

This article provides an in‑depth tutorial on CSS Grid, covering responsive layouts with media queries, auto‑fit/minmax tricks, implicit versus explicit grids, column spanning, alignment properties, place‑content shortcuts, repeat syntax, masonry rows, and useful online resources, all illustrated with practical code examples.

CSSCSS GridHTML
0 likes · 9 min read
Comprehensive Guide to CSS Grid Layout: Responsive Design, Implicit/Explicit Grids, Alignment, and Advanced Techniques
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 6, 2024 · Frontend Development

Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns

This article provides a detailed tutorial on implementing various modern web layout techniques—including horizontal‑vertical centering, equal‑height columns, sticky footers, equal‑distribution columns, the Holy Grail layout, 12‑column grids, justified spacing, and responsive sizing with clamp()—using CSS Flexbox and Grid with practical code examples.

CSSFlexboxResponsive Design
0 likes · 29 min read
Comprehensive Guide to Modern CSS Layout Techniques: Flexbox, Grid, and Common Patterns
Programmer DD
Programmer DD
Jan 21, 2022 · Frontend Development

Master Chinese Poetry Layout on the Web with Heti

Discover how the open‑source Heti project lets you effortlessly apply traditional Chinese typography to web pages, offering grid‑aligned layouts, built‑in ancient poem styles, dark‑mode support, and simple CSS/JS integration for flawless text rendering.

CSSChinese typographyHeti
0 likes · 5 min read
Master Chinese Poetry Layout on the Web with Heti
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Dec 15, 2021 · Frontend Development

Mastering Flexbox Align-Content: When and How It Works

This article explores the flexbox align-content property, explaining its effect on multi‑line flex containers, the required layout direction, and how to achieve expected results with practical code examples and visual demos for both row and column orientations.

CSSResponsive DesignWeb Layout
0 likes · 9 min read
Mastering Flexbox Align-Content: When and How It Works
KooFE Frontend Team
KooFE Frontend Team
Jan 6, 2021 · Frontend Development

Why CSS Logical Properties Are the Future of Responsive Layouts

This article explains how CSS logical properties, introduced in 2020, provide a writing‑mode‑independent way to define layout, reduce code, and improve compatibility across languages such as Arabic, Hebrew, and Japanese, with practical examples and best‑practice recommendations.

CSSLogical PropertiesResponsive Design
0 likes · 6 min read
Why CSS Logical Properties Are the Future of Responsive Layouts
Alibaba Cloud Developer
Alibaba Cloud Developer
Jul 20, 2020 · Frontend Development

Master Modern CSS Layouts: Centering, Grids, Flexbox, and More

This comprehensive guide walks you through essential CSS layout techniques—including horizontal and vertical centering, equal‑height columns, sticky footers, 12‑column grids, holy‑grail layouts, and responsive design—using Flexbox and Grid with clear code examples and visual demos.

CSSFlexboxResponsive Design
0 likes · 25 min read
Master Modern CSS Layouts: Centering, Grids, Flexbox, and More
360 Tech Engineering
360 Tech Engineering
Aug 27, 2018 · Frontend Development

A Comprehensive Guide to CSS Grid Using the Grid Garden Game

This article introduces the educational web game Grid Garden, walks readers through all 28 levels, and explains core CSS Grid concepts—including grid containers, items, lines, tracks, the fr unit, and shorthand properties—providing practical code examples to master modern layout techniques.

CSS GridGrid GardenResponsive Design
0 likes · 10 min read
A Comprehensive Guide to CSS Grid Using the Grid Garden Game
Aotu Lab
Aotu Lab
Apr 14, 2017 · Frontend Development

How to Create a Sticky Footer That Stays at the Bottom on Any Page

This article explains the sticky‑footer problem when page content is short, defines the sticky‑footer effect, and provides four CSS‑based solutions—absolute positioning, calc(), table layout, and Flexbox—detailing their code, advantages, and drawbacks for responsive web design.

FlexboxResponsive DesignSticky Footer
0 likes · 6 min read
How to Create a Sticky Footer That Stays at the Bottom on Any Page
Suning Design
Suning Design
Nov 25, 2014 · Frontend Development

Master Responsive Web Design: 9 Practical Principles for Fluid Layouts

This article explains the core principles of responsive web design, comparing it with adaptive design, and covers concepts such as content flow, relative units, breakpoints, max/min values, nested objects, mobile‑first versus desktop‑first, web versus system fonts, and bitmap versus vector graphics.

CSS breakpointsResponsive DesignWeb Layout
0 likes · 6 min read
Master Responsive Web Design: 9 Practical Principles for Fluid Layouts