loading...

CSS Grid part 2

ziizium profile image Habdul Hazeez ・6 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

This post is the second part of CSS Grid part 1. If you've not read the post I'll encourage you read it before proceeding with this post.

All code snippets remain the same unless otherwise stated.


ALIGNING ITEMS ON THE GRID

Similar to Flexbox grid items can be aligned. In this section we will talk about properties that make this possible and in the next section we'll see how we can pack all the grid items to a specific location on the grid.

The properties for aligning items are as follows:

  • justify-items
  • justify-self
  • align-items
  • align-self

These properties accept the following values:

  • auto
  • normal
  • start
  • end
  • center
  • stretch
  • baseline
  • first baseline
  • last baseline

justify-items

The name of this property says it all, if you've used a word processor like Microsoft Word™ you should already have an idea of how this property will behave.

This property is applied on the grid container itself and it can be used to move all the grid items along the grid row.

The HTML code remains the same but you'll have to clean up your CSS until you are left with bare bones code and let it match the snippet below. Take note of the minor additions and read the comments.

.parent {
  display: grid;
  width: 70%;
  outline: 5px solid #dddddd; /* Just a cosmetic to note the edge of the grid */ 
  margin: 0 auto;
}

/*
 * We are using a attribute selector to select all
 * child boxes
*/
[class ^= "child"] {
  width: 100px;              /* TAKE NOTE we have reduce the width of the box */ 
  height: 150px;             /* The height of the box */
  margin-right:0.5em;        /* Some outer spacing to the right of the box */
  margin-bottom: 0.5em;      /* Some outer spacing to the bottom part of the box */
}

.child-1 {
  background-color: tomato;
}
.child-2 {
  background-color: #1560bd;
}
.child-3 {
  background-color: #3eb489;
}
.child-4 {
  background-color: #ffc40c;
}
.child-5 {
  background-color: #da680f;
}
.child-6 {
  background-color: #0a7e8c;
}

Save and refresh your browser.

Grid items in a grid container

From the image above, please note the following:

  • The browser zoom level has been reduced to 67% so that we can get a better view when the grid items are aligned. If you are on Microsoft Windows™ you can use the keyboard shortcut Ctrl and + or - to reduce or increase the zoom level
  • I have enabled the grid lines
  • The Developer Tools is docked to a separate window.

Back to your code editor and update the .parent with the following:

.parent {
  /* All other properties remains the same */

  justify-items: center;  /* Add this */
}

Save and refresh your browser.

Grid items in a grid

How about we move them to the end of the grid? Update your code:

.parent {
  /* All other properties remains the same */

  justify-items: end;  /* Add new value */
}

The result in the browser.

Grid items in a grid

If you use justify-item: stretch; items will be stretched across the row axis. This is the default value for justify-item. Apply the stretch value and refresh your browser, the grid items will return back to their default position and won't span the entire row because our grid items have a fixed width of 100px.

justify-self

The justify-self property can be applied to a single grid item.

Delete the justify-items property from the .parent then add the following to .child-3:

.child-3 {
  /* All other properties remains the same */

  justify-self: center;  /* Add this */
}

Save and refresh your browser.

Grid items in a grid

The snippet below will move the last box (.child-6) to the end of the grid row.

.child-6 {
  /* All other properties remains the same */

  justify-self: end;  /* Add this */
}

The result in the browser.

Grid items in a grid

align-items

This property is used to align items on the column axis i.e vertically

Comment three boxes from your HTML file, preferably child-3, child-4, child-6 and delete any justify-* code from the child elements then update the .parent CSS rule with the following:

.parent {
  /* All other properties remains the same */


  height: 800px;  /* Add this */
}

Save and refresh your browser.

Grid items in the grid

Now, lets align the item to the end of the column.

.parent {
  /* All other properties remains the same */

  align-items: end; /* Add this */
}

The result in the browser:

Grid items in the grid

The following snippet will align the items to the center of the column.

.parent {
  /* All other properties remains the same */

  align-items: center; /* New value */
}

The result in the browser:

Grid items in the grid

The default value is align-start.

If you feel the boxes are not moving comment another child div in your HTML and start again.


Placing an item at the center of the column and row axis is sometimes a daunting task and before CSS Grid developers had to use the margin property to get the job done. With CSS Grid this is super easy.

In CSS Grid all you have to do is use the combination of align-items and justify-items on the grid container with a value of center for both properties.

.parent {
  /* All other properties remains the same */

  /* Use both properties at once */
  align-items: center;
  justify-items: center;
}

Save and refresh.

Grid items in the grid

If you have just one child element in the grid you will see the true beauty of this technique.

A grid item aligned to the center

align-self

This is analogous to justify-self and it used to align a single item along the column axis.

Make sure you have no align-items or justify-items in your .parent then add the following to child-2:

.child-2 {
  /* All other properties remains the same */


  align-self: end; /* Add this */
}

Save and refresh your browser.

A grid item aligned to the center

In the image above the green box is obstructing the blue box from moving to the end of the grid container, try commenting the HTML code for the green box and refresh your browser.

A grid item aligned to the end of a column

ALIGNING TRACKS ON THE GRID

Grid tracks can be aligned relative to the grid container along the row and column axes.

Two properties are used for this:

  • align-content - aligns tracks along the column axis
  • justify-content - align tracks along the row axis

They accept similar values like previous properties with three additions:

  • space-around
  • space-between
  • space-evenly

Let's start.

We'll be applying the properties to the .parent element, so if you have code in the .parent and any child element from previous section please delete them.

Add the following to the .parent:

.parent {
  /* All other properties remains the same */


  justify-content: end; /* Add this */
}

Save your file and refresh your browser.

Grid items aligned to the end of a grid row

To demonstrate the space-* family of properties, we'll have to make some changes to our HTML and CSS.

Perform the following steps

  • Delete the justify-content:end; from the .parent
  • Remember we commented three boxes in the HTML from previous section, remove the comment, now we will have our six boxes back.
  • Add grid-template-areas to the .parent CSS with the following values
    • "h1 h2" "h3 h4" "h5 h6"
  • Add grid-gap: 1.2em to .parent

Now it's time for some action.

The code below will align all the element to the center of the container. Don't forget to save.

.parent {
  /* All other properties remains the same 
   * including the grid-template-areas and grid-gap that you just added
  */

  justify-content: center; /* Add this */
}

The result in the browser.

Grid items aligned to the center of the grid

The subsequent images are for space-around, space-between and space-evenly

Alt Text

justify-content: space-around;

Alt Text

justify-content: space-between;

Alt Text

justify-content: space-evenly;

That's it for justify-content, up next align-content.


align-content aligns items on the column axis (vertical) which is opposite of how justify-content align content in horizontal direction.

If you have justify-content in your .parent, please delete them and add the following:

.parent {
  /* All other properties remains the same */

  align-content: end; /* Add this */
}

The result in the browser.

Grid items in a grid

I'll leave you to have fun with the following values:

  • start
  • space-around
  • space-evenly
  • space-between
  • center

Save your files before trying each value.

We've come long way in CSS Grid, but we have certainly not covered everything but this is enough to get you started.

Our next topic has to do with devices and screens; Media Queries.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide