
For many years the bane of any web designer's existence was something simple: centering an object on the page. Horizontally centering was one thing, but getting an item to vertically center was a whole different monster. Even worse was both vertically and horizontally centering an element. However, modern CSS stylings have made this a snap with just a few lines of code. Gone are the days of absolute positioning an element 50% of the top and left of its container and bumping it back negative 50% with a transform. Now we can use Flexbox or CSS Grid to quickly center the element and move on.

## Using Flexbox

Flexbox makes it very easy to align items in the center of the container with just three lines of CSS. Just set the display to `flex` and center the items horizontally (`justify-content: center`) and vertically (`align-items: center`).

``` css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}
```

Now all items originate from the center of the container!

It is important to note that if you change to `flex-direction: column` the properties have the opposite effect: `justify-content` becomes the vertical axis and `align-items` becomes the horizontal. Think of it as rotating the container element's axes.

## Using CSS Grid

Meanwhile, CSS Grid makes it even easier by only needing `place-items: center` to center elements in the grid. Just set the display to `grid`, place the items, and you're off to the races.

``` css
.container {
    display: grid;
    place-items: center;
}
```

If you want to control the individual axes you can use the same properties as we did with Flexbox instead, `justify-content` for the horizontal axis and `align-items` for the vertical.

``` css
.container {
    display: grid;
    justify-content: center;
    align-items: center;
}
```

Never get tripped up with centering an element on your website again. Whether you are using Flexbox or CSS Grid add a couple lines of code and move on to something more deserving of your skill and attention.

## Credit

_Today’s Tuesday Tips was adapted from [a series of posts on Daily Dev Tips](https://daily-dev-tips.com/posts/css-grid-most-easy-center-vertical-and-horizontal/)._



## No Media Query Responsive Layouts

[CSS-Tricks](https://css-tricks.com/) published a post today titled _[Thinking in Behaviors, Not Screen Sizes](https://css-tricks.com/thinking-in-behaviors-not-screen-sizes/)_. The main point of the post is that in modern web development we should think beyond breakpoints for a more fluid layout. The post goes on to describe how to use CSS Grid to achieve a responsive website with no media queries.

## Onboarding a Junior Developer

A recent post on the [DEV community](https://dev.to/) discussed [how to onboard a junior developer](https://dev.to/carolstran/onboarding-a-junior-developer-to-your-team-here-s-12-tips-4g3a). The post gives actionable examples of integrating your new hire into the team and practices established by the company. Some of the tips include teaching the company’s Git process, learning their style, and always being available for questions.

## Open-Source Fonts

[WIRED](https://www.wired.com/) published an article last month about [open-source fonts](https://www.wired.com/story/open-source-fonts-love-letters-design-community/) and why they are becoming more popular. The open-source font Raleway, for example, has grown to 9 font weights and is one of the most popular options on Google Fonts. This has also led to variable fonts which are gaining more publicity in the web developer community.



There are four core CSS Grid properties that make up a vast majority of the grid utility. Essentially, if you can master these four you can handle the basics of creating a grid and placing your page elements inside it.

## Displaying the Grid

Before using these four grid properties we of course must set the `display` property to `grid`. Once we do that we have put our child elements inside a grid. You can also create multiple grids on one page to ensure that your layout doesn’t get too out of hand.

## Grid-Template-Columns

The first property that we’re going to discuss is `grid-template-columns`. This is applied to the grid container element and is used to define the columns of the grid. This property doesn’t just layout the columns but the widths of those columns. If you were to set this property to `200px 200px 200px`, your grid would have three columns each 200px wide.

## Grid-Template-Rows

The second property, similarly defined on the grid containing element we made, is `grid-template-rows`. This functions the exact same way as `grid-template-columns` but defines the number and heights of the rows.

For both the properties you can use values common to some other properties, like percentages, auto or px. But a great feature of grids is the fractional value, or fr. This value takes up a fraction of the space remaining, so in its basic form it is similar to percentages in that if you set the three columns each to 1fr they would each take up one third of the width. However, it can also be used in combination with other values.

For example, if we set the columns to `200px 1fr 2fr`, the first column would be 200px wide the second would take up 1 fraction of the remaining space and the third would take up two fractions of the remaining space. So, the second column would be one-third of the remaining space and the last column would fill up the remaining two-thirds. This allows for some pretty dynamic layouts!

## Grid-Gap

The third property is `grid-gap`, also set on the grid containing element. This sets the spacing between all grid elements, however it is different from a margin because there is no spacing around the outside of the grid. Think of it as if the grid was a tic-tac-toe board, the grid gap would be the spacing where the lines are drawn, so where two boxes touch. This property can be more specific by using `grid-column-gap` or `grid-row-gap` to set these values independently.

## Grid-Column and Grid Row

The final properties are `grid-column` and `grid-row` which allow us to place child elements in the grid. You can set span values for these properties on the child elements to delineate how many rows and / or columns that element should take up. So, for example, you could set the child element’s `grid-column` property to `span 3` and it would go across three grid columns.

With these handful of CSS Grid properties you can quickly and easily create website layouts. It is especially great for creating a wireframe or low fidelity mockup. Once you’ve mastered these you’ll feel confident taking on the more advanced properties.

## Credit

_Today’s Tuesday Tips was adapted from [a post on CSS-Tricks](https://css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs/)._



## Web Development Tools

[freeCodeCamp posted today](https://www.freecodecamp.org/news/handy-web-development-toolkit/) about the top 10 web development tools that every programmer should know. Topping off the list were VSCode, Webpack, and Cyprus. Check out the list over on freeCodeCamp’s blog to see which tools you’ve checked off your list.

## Flexbox or CSS Grid

Flexbox and CSS Grid are two great systems for laying out elements on your website. But sometimes it can be difficult to determine which one to use in a particular scenario. Luckily, [LogRocket just posted a complete guide](https://blog.logrocket.com/flexbox-vs-css-grid/) on their blog with tips and strategies for utilizing each system to their full potential.

## Quarantine UX

[Fast Company posted an interesting article](https://www.fastcompany.com/90485589/to-stomp-out-covid-19-america-will-need-a-better-warning-system) last week on how COVID-19 has changed user experience. Most notably the article discussed how delivery services can’t keep up with demand and the resurgence of marginal products. This begs the question: does our user experience need to shift to accommodate the rapidly changing environment?


Posts Tagged with "css-grid"

Tuesday Tips

Monday Medley

Tuesday Tips

Monday Medley