BUILD BETTER UI WITH CSS-GRIDS

Yukta peswani
Jul 1, 2019 · 5 min read

The two-dimensional structure of invisible rows and columns that hold elements of a design or a webpage together.

Image for post
Image for post

WHY USE GRID?

Grids can be utilized as a structural foundation for a website, can enhance website look by allowing to create a stronger layout for HTML elements.

CSS Grid allows you to make HTML into what it was supposed to be; Markup of content. Not visuals, which belong in the CSS

It is easier to understand and write than positioning & floating.

GRIDS IN CSS

To make an element exhibit grid properties enclose the element within a container i.e a parent element and give CSS styling to the parent as a display grid.

But this doesn’t do anything yet, hence we have to define the children’s as to how we want to define it, taking the following example of a parent with 4 children look how grid gets applied to it

Image for post
Image for post

To make it 2D we need to define rows and columns that can be achieved using the property of

grid-column-template & grid-row-template. Space to be acquired can be specified with this property grid-template-columns: 200px 200px 200px 200px;

Here 200px on the screen will be taken by each of the grid container child.

This px & % dividing task can be tedious while making responsive websites and hence With CSS Grid Layout, we get a new flexible unit: the Fr unit. Fr is a fractional unit.

That grid property of rows and columns now can be written as grid-template-columns: 1fr 1fr 1fr 1fr; and 1fr is for 1 part of the available space

consider the example below :

Image for post
Image for post
grid-template-columns

The same property can be used with the rows as grid-template-rows

Consider the example below for better understanding

Image for post
Image for post
grid-template-rows

Repeating Grid Tracks

Define repeating tracks using the repeat notation as the number of rows/columns to be repeated and equal space to be given i.e. the track definition: repeat(3,1fr) Repeat 3times with 1fr space works same as giving 1fr thrice consider the example below

BREAKING THE GRID

To create more visual interest, don’t be afraid to step outside of the grid, but be aware that it can break the visual hierarchy

The main aim of this griding is its layout which can be achieved as a grid-column-start & end to give unequal spacing to the children. we’re saying here is that we want item1 to start on the first grid line and end on the fourth column line. In other words, it’ll take up the entire row.

Here’s how that’ll play out on the screen

Image for post
Image for post
repeat(3,1fr)

Classname:first-child() is the CSS property selector to select the first child with the same class name

Confused? Even I was why we have 4 column lines when we only have 3 columns??

Take a look at the picture below with 4 column lines

Image for post
Image for post
grid lines

Grid spanning of rows

Just as the rows of the column can be spanned too with the same properties of grid-row-start & grid-row-end

Just as the first-child() selector property the nth-child(n) is the selector property of the CSS to select nth-child as in the example given below the second item was to be selected nth-child() function was passed 2

Image for post
Image for post
columns-start & end

The shorthand way to write the above properties can be given as grid-column start/end;

Example : grid-column: 2 / 2;

Image for post
Image for post
shorthand property

The grid gutters or gaps

Grid-column-gap & grid-row-gap properties can create gutters between the column and rows.

Grid gaps are only created between rows and columns and not along the edges of the grid parent(container)

Image for post
Image for post
grid gaps

Instead of defining the start and end the columns and rows can be made to span to the number of rows and columns needed

Here is how to do that grid-column: start/ how-much-to-span

grid-column : 2 / span 2;

Image for post
Image for post
spanning of grid

Naming the and positioning items by grid areas

Like grid line names, grid areas can also be names with the grid-template-areas property. Names can be then referenced to position grid items. Set of names should be surrounded in single or double quotes and each name separated by whitespace.

Each set of names defines a row and each name defines a column.

.container{

display: grid;

grid-template-areas:

‘header header header’

‘content content sidebar’

‘box-1 box-2 box-2’

‘box-3 box-3 box-3’

‘footer footer footer’;

grid-gap: 1.5rem;

}

.header{

grid-area: header;

}

.content{

grid-area: content;

}

.sidebar{

grid-area: sidebar;

}

.box-1{

grid-area: box-1;

}

.box-2{

grid-area: box-2;

}

.box-3{

grid-area: box-3;

}

.footer{

grid-area: footer;

}

.header, .footer{

text-align: center;

}

.header, .content, .sidebar, .box-1, .box-2, .box-3, .footer{

border: solid 1px #CCC;

padding: 1.5rem;

}

Image for post
Image for post
template areas

Follow the following link for a better understanding of this concept to be used in the actual implementation of this concept in website development

Yukta12/photo-gallery/

Popular grid-frameworks

1. BOOTSTRAP

2. MASONARY.JS(PHOTO-GALLERY)

3. Foundation

4. Flexboxgrid.css

This article is written as to give you a fair brief idea about the overview of the Grid; though not a complete technical documentation

Here are some other fantastic resources on CSS grid

· Complete guide to CSS on CSS tricks

· Grid garden by codepip

· Spring into CSS GRID by Joni trythall

I am susceptible to make mistakes or being wrong. If you see any such mistake reach me out on mail: yuktapeswani12@gmail.com :)

HAPPY DEVELOPING! ❤

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store