All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 146
CSS Grid: Defining a 2D Layout Container
Turn an element into graph paper with display: grid, making its children items you can place in rows and columns. It's ideal for page-level layouts or complex components. The footgun: grid properties only apply to direct children, not nested elements.
The `gap` Property: Spacing Without Margin Hacks
The gap property adds space *between* elements in a layout, not around them. Use it on Flexbox, Grid, or multi-column containers for clean, consistent gutters.
CSS Grid: Placing Items on the Grid
Think of CSS Grid as a coordinate system for your layout. You can explicitly place items using line numbers or named areas, or let the browser auto-place them. This is key for page scaffolds and galleries. Footgun: Grid lines are numbered from 1, not 0.
CSS Grid-Template-Areas: Draw Your Layout in CSS
CSS grid-template-areas lets you visually "draw" your layout by naming cells in a string matrix. It's ideal for defining page structures like headers and sidebars. The biggest footgun: named areas must form a perfect rectangle, or the layout breaks.
CSS Logical Properties: Layout That Speaks Every Language
Think 'start/end' not 'left/right'. CSS Logical Properties adapt your layout to the user's writing direction, from English to Arabic. Use padding-inline-start instead of padding-left for robust, internationalized sites.
CSS minmax(): Flexible Sizing for Grid Tracks
The minmax() function gives a grid track a minimum and maximum size, like a rubber band that stretches but won't snap. Use it in CSS Grid to create columns that grow with the viewport but never shrink below a readable width.
CSS aspect-ratio: Maintain Shape in Responsive Layouts
The aspect-ratio property sets a box's width-to-height ratio, making it maintain its shape as its container resizes. It's ideal for responsive video embeds or uniform grid items. The footgun: it has no effect if both width and height are fixed values.
CSS Grid: auto-fit vs. auto-fill
Create responsive grids without media queries. auto-fill creates as many columns as fit, leaving empty ones. auto-fit collapses empty columns, letting content stretch to fill the space. The footgun is using auto-fill when you want items to grow.
CSS Subgrid: Aligning Nested Grids
CSS Subgrid lets a nested grid borrow its parent's column or row tracks, solving the classic problem of aligning items inside components. This ensures elements within multiple cards, for example, line up perfectly.
CSS Container Queries: Style Components, Not Just Pages
Container queries let components respond to their own size, not the viewport's. Use them for cards or sidebars that must adapt to different layouts. The footgun: you must first declare a parent as a "containment context" with container-type for it to work.
The @media Rule: CSS for Different Screens
The @media rule is like an if-statement for your CSS, applying styles only when conditions like screen size are met. It's the core of responsive design, creating different layouts for mobile, tablet, and desktop.
The Viewport Meta Tag: Your First Responsive Step
The viewport meta tag tells mobile browsers not to fake a desktop screen. It sets the page width to the device's width, enabling responsive design. It's essential for any modern site. The footgun: disabling user zoom (user-scalable=no) harms accessibility.
Fluid Layouts: Adapting Content to Any Screen
A fluid layout makes content flow to fill its container, preventing horizontal scrollbars. It's key for responsive sites that work on any device and for accessibility. The footgun: without constraints, content can become unreadably wide or awkwardly cramped.
Flexible Images: More Than Just `max-width`
Flexible images adapt to the device by providing different resolutions or crops. Use srcset for high-DPI screens and <picture> for art direction. The footgun is relying only on CSS max-width; this forces mobile users to download unnecessarily large…
Relative CSS Units: rem vs. em
Relative CSS units like rem and em tie element sizes to font size for scalable UIs. rem is relative to the root font size, providing consistency. em is relative to the parent, causing sizes to compound. The footgun is accidentally nesting em units.
Viewport Units: Sizing Against the Browser Window
Viewport units (vw/vh) size elements relative to the browser window, not their parent container. 1vw is 1% of the viewport's width. Use them for full-screen hero sections or typography that scales with the browser. A common footgun: 100vw causes overflow.
The <picture> Element: Art Direction for Images
The <picture> element provides art-direction for images, letting the browser pick the best source file. It's used to serve different images for various screen sizes, resolutions, or formats, improving performance and user experience.
srcset and sizes: Responsive Images in HTML
Give the browser a menu of images with srcset and tell it how much screen space the image will take with sizes. The browser then picks the most efficient option for the user's device. The footgun is forgetting sizes, which makes the browser assume 100vw.
CSS object-fit: Control How Images Fill a Box
object-fit tells an image how to behave inside a container with a different aspect ratio, preventing distortion. Use it for responsive hero images or product grids. The default is fill, which stretches the image; you almost always want cover or contain.
CSS clamp(): Fluid Sizing in One Line
The CSS clamp() function sets a value that scales between a minimum and maximum, like a thermostat for CSS properties. It's ideal for fluid typography, letting font-size grow with the viewport but not beyond set limits.