Create a responsive layout with CSS Grid

CSS Grid Layout is growing in browser support every day and we can ship CSS Grid to production. The quick adoption of CSS Grid has been truly remarkable.

Before we get to making a responsive portfolio site layout with CSS Grid, let’s clear a couple things up first: CSS Grid is not a replacement for Flexbox. It’s not even a replacement for floats. In fact, you might realise that we’ve been using Flexbox to do things that CSS Grid does much better. But instead of thinking in terms of replacement, we can think in terms of combination.

Imagine a peanut butter and jelly sandwich. Peanut butter and jelly are pretty great on their own, but when they come together, a new thing is born and magic happens.

This is what our layout tools are like. They are great at the things they do individually, but when they’re combined, magic happens and we can create new and exciting layouts. In this instance, we’ll make a web development PB&J of our own with CSS 
Grid and Flexbox.

  1. Set up your markup

Our layout doesn’t look like much, but the skeleton with our six items is in place.

In this tutorial we’re going to use CSS Grid and Flexbox together to create a responsive portfolio layout. Each of these boxes are a different size, some of them span across rows and each box has a title that sits at the bottom. We’ll use some of the great alignment tools that come with Flexbox to make that happen.

Let’s start by setting up our markup.

<ul class=”boxes”>

<li>

<div class=”boxes__text-wrapper”>

<h2>Case Study Title</h2>

<p>A catchy description for our case study. We worked hard.</p>

</div>

</li>

</ul>

We’ll duplicate that list item and everything in it six times so we have items to play with. In case you’re wondering, we’ve decided to use the ul element here because this is a list of entries. Feel free to use whatever feels right to you.

Inside of the list item we have a div with the class of .boxes__text-wrapper that will contain the title of the case study and its accompanying description.

  1. Write base styles

We’ve set our font to something a bit nicer and removed the default margin from headings and paragraphs

Now let’s set some base styles to work with.

body {

font-family: Avenir, sans-serif;

margin: 2rem auto;

width: 95%;

}

h2,

p {

margin: 0;

}

ul {

list-style: none;

padding: 0;

margin: 0;

}

.boxes > * {

padding: .5rem;

background-color: #333;

color: white;

}

We’ve changed the font to be Avenir. We’ll remove margin from our heading and paragraph, and reset the unordered list. We’ll also give each list item some default styles to help us see where each one is.

  1. Set up your grid

With only three lines, we’ve added a gutter between our Grid items and made them a bit taller

We want to build our layout for mobile first. Setting up our grid on small screens is as easy as this:

.boxes {

display: grid;

grid-auto-rows: minmax(125px, auto);

grid-gap: .5rem;

}

 

web design

Grid will stack our items on top of one another because by default there is only one column. We’ll create some space between each case study by using grid-gap – this lets us add a gutter between rows and columns.

Forget adding a margin to columns only to need complex nth-child selectors; gutters only appear between columns or rows, never after or before a column or row.grid-gap is the shorthand of 
grid-column-gap and grid-row-gap. Usually we’d use the longhand, but we’re going to overwrite both as the browser grows so we’ll use the shorthand.

Next, we’ll use grid-auto-rows to tell our grid container the height of new rows. Grid will create new rows to place all of our content. We can control the size of these automatically-created rows with the grid-auto-rows property. We’re using a new function available to us: minmax(). With minmax() we can 
specify a minimum size and a maximum size.

With our code we’re saying that we want our rows to be a minimum of 120px and a maximum of auto. We’re using auto here because we want our rows to grow if the content warrants it.

  1. Set up large browser compatibility

Our grid is taking shape! We have six columns to work with and less gutter between our grid items

Let’s set up our page so that when our browser is 40em or larger, our grid container has six 
columns of one fraction each.

@media screen and (min-width: 40em) {

.boxes {

grid-template-columns: repeat(6, 1fr);

grid-gap: 2px;

}

}

 

grid-template-columns is the property we use to tell our grid how many columns should exist. It accepts all the length units we know and love such as rem, em, px, percentages, 
vw, vh and fr.

The fr is a new unit that we get with CSS Grid Layout. With it, we can tell the browser to do maths instead of us – excellent.

By telling the browser to create six columns of one fraction, the browser will calculate the width of our grid container and split it into six equal columns. Also, because Grid is smart, it’ll only divide the space left over after calculating the gutter that we specified.

  1. Style individual items

Coffee makes everything look nicer doesn’t it? Also the subtle gradient makes our title and description stand out

Our case studies look a little drab as just grey boxes. Let’s add a background image, get our titles to display at the bottom of these boxes and add a gradient so that our title stands out.

.boxes li {

background-image:

linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8)),

url(path/to/image);

background-size: cover;

display: flex;

align-items: flex-end;

}

I’m also bringing Flexbox into the mix to align our text to the bottom of our boxes. You won’t see that yet, but as we place each different box you’ll eventually see it work.

  1. Place items on the Grid

Grid makes it insanely easy to size our Grid items however we’d like. But this is only the beginning

Unfortunately, Grid does not have a way to automatically place items in the grid layout that we saw at the beginning. Fortunately for us, however, Grid does give us the tools to do it manually quite easily. In this tutorial we’ll use nth-child to place each list item. In a production website we would advise to use a class that, given the right planning, could make it possible to automate layouts like this in a content-heavy site.

Let’s get started with our first item.

@media screen and (min-width: 40em) {

.boxes li:nth-child(1) {

grid-column: 1 / -1;

grid-row: span 3;

}

}

We’ll be putting all of our placement styles inside of that media query we wrote earlier because we want this layout to happen after our browser is 40em or larger. With nth-child we’re targeting the first list item. CSS Grid lets us easily place our items with 
grid-column and grid-row. There are many different ways to specify where items should be, but here we are telling our item to start at column line one and span the whole container with -1.

Then, with grid-row, we are telling the item to span three rows. How do we know that three rows will be the size we want? Well, we specified the size of these rows with grid-auto-rows a few moments ago, and if we’re not happy with them we can change the minimum size.

Let’s place the rest of our items.

@media screen and (min-width: 40em) {

.boxes li:nth-child(2) {

grid-column: span 2;

grid-row: span 7;

}

 

.boxes li:nth-child(3) {

grid-column: span 4;

grid-row: span 3;

}

 

.boxes li:nth-child(4) {

grid-column: span 2;

grid-row: span 4;

}

 

.boxes li:nth-child(5),

.boxes li:nth-child(6) {

grid-column: span 2;

grid-row: span 2;

}

}

Isn’t it amazing how much control Grid Layout gives us? With only a few lines of code, we can put together a completely responsive layout that won’t break if any more items are added.

Sure, they might look a little wonky because they’ll only take up one grid column and row by default, but it doesn’t break our layout. If we were doing this with floats, and fixed widths and heights, we’d be in a bind if more content were to be added.

Our finished layout! Isn’t this amazing? Grid allows us to place our items easily in two dimensions

A quick aside about older browsers

OK, it’s time to address the elephant in the room. ‘What about older browsers?’ The answer to this question is the same as it is for any new feature in CSS: use feature queries and embrace the cascade. Feature queries are very well supported, and where they’re not we can place our fallback first. For example, we’d write something along the lines of:

.your-selector {

display: flex;

}

 

/* Your Grid code */

@supports (display: grid) {

display: grid;

grid-template-columns: repeat(3, 1fr);

grid-gap: 1rem 2rem;

}

 

Writing our code in this way means that if the browser understands Grid Layout, it’ll use that instead of Flexbox. Also, because we’re embracing the cascade, browsers that don’t understand feature queries will ignore them and already have the information they need. We might need to plan how we write our styles a little more than usual, but by doing it we can create great-looking layouts with sensible fallbacks.

Also, as time goes on, there will only be more and more support for CSS Grid. Just think how great it would be to later delete our fallbacks and leave all the Grid-related CSS. As you learn more about Grid, you’ll realise that it does lots of things we do right now with many fewer lines of CSS.

 

Create a responsive layout with CSS Grid

Some tips to write a CSS

DevsZone gives you some tips to write a CSS that is clean, efficient and useful.

Writing better CSS doesn’t have to be a painstaking ordeal. A few minor adjustments to how you work within your CSS code file can have a big impact. In this article, we’ll take a look at some tips to write a CSS that you  can improve your CSS skills and write cleaner, more efficient, and better CSS code.

1.     Start with a CSS Reset

CSS Reset

CSS Reset gives you a clean base to work.

CSS Reset allows you to start with a clean base, making it easier to style your website, with more predictable outcomes across the board.

A CSS Reset resets or overrides the default styles of the browser. You may write your own, use one of the many resets available online, or use a combination of the two.

2.     Know when to use CSS shorthand

css shorthand

DevsZone gives you a way is Shorthand should reduce your file size and help speed up load times

CSS shorthand enables you to set multiple properties of an element in a single line. Using shorthand saves space and takes less time to load. However, you shouldn’t use it for everything.

Sometimes longhand provides much-needed clarity. But more importantly, when you only need to set one or two properties – or you simply need to override something – longhand may actually be better.

3.     Keep it DRY

Dry css

Quite possibly the best advice for writing better CSS code is to follow the DRY methodology. DRY means ‘don’t repeat yourself’ – essentially, don’t use the same bits of code over and over again.

One way to keep things DRY in CSS is to group things together. Let’s look at an example.

Original CSS

.menu li {

color: red;

}

.menu li a {

color: red;

}

Refactored and DRY

.main li, .main li a {

color: red;

}

As you can see, not only will this reduce the overall size of your CSS file – which creates faster load times – but you’ll also benefit in the area of maintenance too. If the color property needs updating, you’re only updating it one spot.

You can also use CSS custom properties to help stay DRY. Custom properties are created like so:

:root {  –primary-color: red;}

And then can be used anywhere within your CSS code, as often as you’d like:

.main li, .main li a {  color: var(–primary-color);}

05. Keep consistent

Regardless of how you write your CSS, and in which order you add the properties, keep it consistent. Some people order their properties alphabetically, while others use more of a logical approach – for example, organising things by line length or type. I opt for the former, but it’s entirely up to you. The bottom line is whatever you choose, stick with it so it’s easy to find things later.

06. Name things intelligently

name things

Use a standard naming convention for your selectors

This seems like a no-brainer, but when naming your selectors, don’t get overly complicated. Be succinct and stick with a standard naming convention.

Some things to consider when coming up with your selector names:

  • Avoid presentation words: These are the ones that involve colour and display location (for example, green-text or top-menu-bar)
  • Only use lowercase: CSS is case-sensitive, so don’t create names like, MeNuBaR. It should be noted, however, that camel case (menuBar) is an acceptable practice, just not preferred in some cases
  • Separate multiple words using a dash: For example, main-menu. You may also use camel case (mainMenu), but again, this is often not preferred
  • Don’t be too specific: You’ll end up using multiple selectors for the same type of element. For instance, list-one and list-two can be combined, creating a single list-items

DevsZone rounded up some tips to write a  CSS for designer. These are helps you a to create a design.

Our main target is our client’s satisfaction to provide best web design or development.

 

Some tips to write a CSS

Some tips to write a CSS