Tag: grid-template-columns

Rendering External API Data in WordPress Blocks on the Back End

This is a continuation of my last article about “Rendering External API Data in WordPress Blocks on the Front End”. In that last one, we learned how to take an external API and integrate it with a block that … Rendering External API Data in WordPress Blocks on the Back End originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading Rendering External API Data in WordPress Blocks on the Back End

The New CSS Media Query Range Syntax

The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like , and =, that make more sense syntactically while writing less code for responsive web design. The New CSS Media Query Range Syntax originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading The New CSS Media Query Range Syntax

A Pure CSS Gallery Focus Effect with :not

Oftentimes in the past, I needed to figure out how to add styles to all elements inside the container but not the hovered one. Demo of the expected “fade-out” effect on siblings to let users “focus” on a particular element.… A Pure CSS Gallery Focus Effect with :not originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading A Pure CSS Gallery Focus Effect with :not

Rendering External API Data in WordPress Blocks on the Front End

There’ve been some new tutorials popping here on CSS-Tricks for working with WordPress blocks. One of them is an introduction to WordPress block development and it’s a good place to learn what blocks are and to register them in WordPress … Rendering External API Data in WordPress Blocks on the Front End originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading Rendering External API Data in WordPress Blocks on the Front End

Using Grid Named Areas to Visualize (and Reference) Your Layout

Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). … Using Grid Named Areas to Visualize (and Reference) Your Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading Using Grid Named Areas to Visualize (and Reference) Your Layout

Zooming Images in a Grid Layout

Creating a grid of images is easy, thanks to CSS Grid. But making the grid do fancy things after the images have been placed can be tricky to pull off. Say you want to add some fancy hover effect to … Zooming Images in a Grid Layout originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading Zooming Images in a Grid Layout

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define the grid using a combination of grid-template-columns, grid-template-rows… Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers originally published on CSS-Tricks. You should get the newsletter. ...
Continue Reading Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

An Auto-Filling CSS Grid With Max Columns of a Minimum Size

Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid’s “natural” … An Auto-Filling CSS Grid With Max Columns of a Minimum Size originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading An Auto-Filling CSS Grid With Max Columns of a Minimum Size

CSS Scroll Snap Slide Deck That Supports Live Coding

Virtual conferences have changed the game in terms of how a presenter is able to deliver content to an audience. At a live event it’s likely you just have your laptop, but at home, you may have multiple monitors so … CSS Scroll Snap Slide Deck That Supports Live Coding originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading CSS Scroll Snap Slide Deck That Supports Live Coding

“Evergreen” Does Not Mean Immediately Available

I have a coworker who is smart, capable, and technologically-literate. Like me, they work on the web full-time. When they are sharing their screen in a meeting, I find myself disassociating fixating on the red update button in their copy … “Evergreen” Does Not Mean Immediately Available originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter. ...
Continue Reading “Evergreen” Does Not Mean Immediately Available