This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Align Elements with Ionic Grid

    Chris GriffithChris Griffith

    Since Ionic's grid system is built on top CSS's flexbox, we can use the same alignment system it uses. We'll use a three-column grid in a template, along with some content in each column.

    You'll learn how to use the Ionic Grid's Flexbox roots to quickly align rows and columns.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:01 Since Ionic's grid system is built on top CSS's flexbox, we can use the same alignment system it uses. I have a three-column grid already in place in my template, along with some content in each column.

    00:13 I've also added some CSS, so the columns are visible. Now, if I want a row's content to be aligned at the top, I can use the align-item-start directive. If I want the content to be aligned to be the bottom of the row, I can use align-items-end.

    00:35 I can also apply these to individual columns as well. Let's set each column to be different. How about we set the columns to be top, middle, and bottom? That would be align-self-start, align-self-center, and align-self-end.

    00:54 Saving, you can see the results. For horizontal layout, I can add additional directives to do this. Again, these directives mirror the flexbox alignment options. To demonstrate this, I'm going to first reduce the column widths by adding the col- and the number of columns I want.

    01:15 Now, I will apply the justify-content-in directive. Saving, we can see the change. Let me show you another alignment in action. I will change the directive to justify-content-around. Saving, and now the columns have a different alignment altogether.

    01:35 One thing to note with the horizontal alignment options, they will be applied to all the columns. You may need to use other alignment solutions for your content if you need to mix the horizontal alignment of an individual column.

    Discuss

    Discuss