Links

In Level 3 of the Display specification, the value of display is defined as two keywords. These keywords define the outer value of display, which will be inline or block and therefore define how the element behaves in the layout alongside other elements. They also define the inner value of the element — or how the direct children of that element behave.

This means that when you say display: grid, what you are really saying is display: block grid. You are asking for a block level grid container. An element that will have all of the block attributes — you can give it height and width, margin and padding, and it will stretch to fill the container. The children of that container, however, have been given the inner value of grid so they become grid items. How those grid items behave is defined in the CSS Grid Specification: the display spec gives us a way to tell the browser that this is the layout method we want to use.

As simply put by Rachel:

When you define layout on a box in CSS, you are defining what happens to this box in terms of how it behaves in relation to all of the other boxes in the layout. You are also defining how the children of that box behave.

If there’s one thing you can do to make your websites better, it is to embrace what the web platform gives you: HTML, CSS, and JavaScript — in that order. Apply the Rule of Least Power. Build with progressive enhancement in mind. You’ll be a happier developer. Your visitors will be happier, too, as things work as expected.

Jim Nielsen makes the case for design engineers as professionals who do design work with code. He also emphasizes the limitations of traditional design tools, which often produce static images that don’t fully capture the dynamic nature of web interactions, and advocates for designing in the browser instead.

You need someone who can do design work with code.

That’s right: design work with code.

Pixels of an interface from a GUI tool are a static representations of a dynamic form. It’s the difference between a picture of me and the living, breathing, moving me.

Design engineers don’t just push pixels around in a GUI tool, they do it in a web browser — the medium of delivery — designing not just the visuals but the interactions that make sense for a living, breathing, moving interface.