Forem: Marius Eisenbraun

TIL: In CSS, DarkGray is lighter than Gray

Marius Eisenbraun — Thu, 09 Jan 2020 21:47:54 +0000

When building prototypes or examples, I often use named CSS colors.

After playing around and working with CSS for some years, today I learnt:

DarkGray is lighter than Gray 🤔

It got me so confused, I had to check it three times.

The easy solution:
If you want a "dark gray", choose DimGray.☝️

What would you like to know about CSS?

Marius Eisenbraun — Thu, 09 Jan 2020 21:32:19 +0000

Hey, my front-end-friends!

There are many css tutorials and code-snippets out there, but maybe you got a topic that is not covered or just didn't find the right solution?

Tell me in the comments, what you would like to know about CSS.

Hopefully I later can explain it in a short posting or other nice web-devs will give you some hints/links/examples.

Let's share our knowledge! 🙌

simple responsive grid layout w/ css-grid

Marius Eisenbraun — Sun, 05 Jan 2020 19:47:39 +0000

Why a grid?

There are many reasons out there to display content as a well structured grid. Someone needs a small image gallery, the other one needs to display products or maybe a simple portfolio. And over all there is this trend to put content in 'cards' to structure the UI.

Especially when you are in a component-based environment, it is very handy and powerful, to put the layout in the container-element so the child-components will just use it without any worries.

Wouldn't it be nice, to have an easy solution with CSS, to start with?

Here is one, using the implicit grid:

The HTML

We wanna keep it simple, with a container and some cards/items/elements inside of it.

<body>
  <main>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
    <div class="card">11</div>
  </main>
</body>

The <main> is our container. Every direct child should be displayed in a nice grid.

'nice' in this context means:

elements get the same width
the same hight
on every screen size

So yes, of course it has to be responsive!

The CSS

So let's define our container via display: grid and add some 'CSS-magic':

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
}

These three lines are all you need to define a simple and responsive grid.

So, what happens:

1. we define `<main>` to be displayed as grid.

Easy.

2. we define columns

repeat generates a column or a pattern of columns in a given amount.
- The amount of columns is the first value. The size or pattern is the second value.
auto-fit is used, coz we don't know a fix number of columns. We just want as much columns as are fitting on the screen. So we let the browser generate this number for us.
minmax(300px, 1fr) defines the size of each column. The size is fluid between the first and second value. So we set 300px as minimal size for each grid-item and with 1fr we make sure, the items always keep the same size.

More about this pattern: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

3. we define rows

This minmax() function is used to set a minimal height for each grid-item, but also to define that all items will have the same height.

You could remove this line, if you don't want this even-height behavior and the rest of the responsive grid will work as expected.

Beautify

Of course a grid-ui has some gaps between it's children, so let's add this:

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  grid-gap: 2rem;
}

Also, sometimes a grid-item can be more important than others, so you change it's size (e.g. grid-column: span 2;). In this cases you can generate empty spots in your well structured grid. To avoid this we add another line:

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  grid-gap: 2rem;
  grid-auto-flow: dense;
}

Demo

(open it in new window to better see the responsive behavior)

Centering in modern CSS

Marius Eisenbraun — Sat, 04 Jan 2020 18:33:17 +0000

Centering stuff in a layout sounds like a usual thing. Everyone does it in designs, sketches or even Word documents.

But for the web it was complicated for years to centering content or HTML elements - especially in vertical direction.

The good ol' time

You could use things like display: table or later positioning + transform: translate(). It works! But explaining that behavior to new developers was always a bit uncomfortable. Because the newbie and the teacher both got that feeling:

"There must be a better solution!"

Well, it is!

modern CSS

In the CSS-era of flexbox and grid both display types offer an easy solution to this one big question:

.container-element {
  display: grid; // or flex!
  align-items: center;
  justify-content: center;
}

What ever element will but put inside that container, it will be centered. In both directions!

In addition there are two more benefits:

No fix values, means: responsive by default!
Not only centering child elements but also centering the pure text content of the container

a short demo using both:

Codepen: https://codepen.io/mreis/pen/WNbXPeB