Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

flexbox wrap

I'm trying to create a layout so that my images are styled in a 3x3 grid layout. I'm using flexbox and trying to use flex-wrap. But haven't been able to work it out. Any help wold be much appreciated. Here's my code

<div class='main-content-container'>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div><div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div><div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
            <div class='container'>
                <a href='#'><img src="img/item-01.png" alt=""></a>
                <p class='image-caption'>ABSD</p>
            </div>
        </div>

.wrapper,
.nav-info,
.main-content-container,
.paragraph {
     display: flex;
flex-wrap: row wrap;
}

#title {
    /*margin: 0 auto;*/
    background: steelblue;
    text-align: center;
}

.wrapper {   
     background: red;
     justify-content: flex-end;
     margin-right: 50px;
}

.main-content-container {
    max-width: 940px;
    margin: 0 auto;
    padding: 30px;
    background: green;
    flex-wrap: row wrap;
}

.container {
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
    background: lightyellow;
}

.paragraph {
    max-width: 1040px;
    margin: 0 auto;
    background: purple;
}

.paragraph-1,
.paragraph-2 {
    padding: 30px;
}

.image-caption {
    background: skyblue;
    margin: 0;
}

ul {
    list-style: none;
    /*margin-right: 50px;*/
}

hr {
    margin-left: 50px;
    width: 50%;
}

img {
    max-width: 100%;
    margin: 0;
}
mtch
mtch
8,521 Points

Don't know if that is waht you're after, but have a look at that jsfiddle.

http://jsfiddle.net/znb32d76/

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

THanks mtch, I appreciate your help!

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi Gabriel,

You were sort of on the right track. :)

One thing I would like to mention is if you want to combine flex-direction and flex-wrap into a single statement, you need to use flex-flow, e.g. flex-flow: row wrap;.

There are only a few other properties you need to add to make it work as a 3x3 grid. One in .main-content-container and two in .container. see below for explanation

.main-content-container {
  display: flex; /* for context */
  flex-flow: row wrap;
  justify-content: center;
}

.container {
  margin: 10px 1em; /* For some spacing and centering flavor */
  flex: 0 1 20%; 
}

I set a margin on .container for spacing and since you wanted the grid in rows of 3 I didn't feel that align-items or align-content were required.

Within .container, setting the flex-basis portion of flex to 20% is not entirely arbitrary as it sets the width based on dependencies of the flex container, and any margins and/or padding on each of the flex container and flex item. What this means is that if you change the padding on .main-content-container and/or margin on .container you will have to change the flex-basis to compensate.

I created an example, which you can find below, displaying how this works. I encourage you to change the width by sliding the separator bar between the code view and rendered view (if the views are horizontal) or resizing your browser window. I have removed the extraneous code in the CSS you posted above that was not relevant to the experiment. I have added a media query so that it still displays as a 3x3 grid for some smaller screens.

Live Example

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Thanks for your help Sean, I really appreciate it.