I want Main Axis Order.

[mirrortorrent]

This is what I am trying to achieve as far as layout "www.a2hosting.com" or something like it with my project.

http://codepen.io/mirrortorrent/pen/dWNOva?editors=1100

How do I get my boxes to line in order on rows, Not columns? (I want Main Axis 1,2,3,4 Not 1,1,1,1) and I would like to have a "header" for every box set I understand nesting would be invalid. If you would be so kind to comment on my CSS or understanding thereof?

[rachelandrew]

I'm afraid I don't understand the question or what from the linked example you are trying to build.

I would suggest starting with a smaller example. It will make it easier for you to work out what you want and also to demonstrate a test case.

[sunright]

mirrortorrent,

Question 1: If you would like to change the auto flow of the grid, us should try: grid-auto-flow

• please check out rachel's explanation of grid-auto-flow

Question 2: Not sure if I understand what asking for. But you can nest grids within grids.

*please check out Rachel's explanation of nesting grids

Last thing: I created a little code for you to pop in your codepen example. Give it a try and see if it will help you with learning how to use grid.

.grid {
  display: grid;
  grid-template-rows:375px 375px 375px 375px ;
  grid-auto-flow:column;

}

.container1, .container2, .container3, .container4 {
  display:grid;
  grid-template-columns: 250px 250px 250px 250px;
  grid-gap:20px;
  font-size: 1.5em;
  background-Color: #56B949;
}

Robert DiBlasi We all learn by sharing what we know

[mirrortorrent]

@sunright played with the code you gave me, Sorry not doing anything right for me. Let's simplify my problem, how do I get the box number to go up on the main axes (Main Axis 1,2,3,4 & Not 1,1,1,1) not count down on the cross axes? OR the same question, how do I get the boxes to order on the row not the column?

[sunright]

mirrortorrent:

Let's simplify my problem, how do I get the box number to go up on the main axes (Main Axis 1,2,3,4 & Not 1,1,1,1) not count down on the cross axes?d OR the same question, how do I get the boxes to order on the row not the column?

you have: 11111 2222 3333 4444

if you copy and paste the code I gave you will in my last attempt to answer your question will produce: 1234 1234 1234 1234

Is this the pattern your looking for this ? 4444 3333 2222 1111

what does the pattern look like?

I am sorry if I do not understand what your looking for.

Robert DiBlasi We all learn by sharing what we know

[mirrortorrent]

1234 1234 1234 1234 is what i am looking for, thank you (it did not work earlier )
but now it dose not fold under it self on smaller screens?

[mirrortorrent]

desktop "header" 1234 "header" 1234 "header" 1234

mobile "hea der" 12 34

"hea der" 12 34

so on and so forth with so little info and lessons on grids thinking it would be more productive if I move on to flexbox, not something I want to do its just I have projects now, and I don't know how to build a page if its not flexibil... I don't know.

[sunright]

mirrortorrent,

First thing don't give up...move slow and understand...please have fun!!

The example I made for you will help you learn CSS Grid Layout 1) how to nest grids 2) grid-template-areas 3) grid-auto-flow 4) how to use media query

Rachel's website is excellent please to learn: www.gridbyexample.com

Robert DiBlasi We all learn by sharing what you know

Please copy and paste: your codepen

.grid{
  display:grid;
  grid-template-areas:"container1"
                      "container2"
                      "container3"
                      "container4";                 
}

.container1,.container2,.container3,.container4{
  display:grid;
  grid-auto-flow:column;
  grid-gap:20px;
  width:calc( (250px * 4) + (20px * 4));
  margin-bottom:20px;
}

.container1{
  background:red;
}
  .container2{
  background:orange;
}
.container3{
  background:green;
}
.container4{
  background:blue;
}

.box11,.box12,.box13,.box14,
.box21,.box22,.box23,.box24,
.box31,.box32,.box33,.box34,
.box41,.box42,.box43,.box44{
  border-style: outset;
  border-width: 3px;
  background-color: #ccc;
  height: 350px;
  width: 250px;
  border-radius: 15px;

}

@media(max-width: 990px){
    .container1{
    grid-template-areas:"box1 box2"
                        "box3 box4";  
    width:calc( (250px * 2) + (15px * 2));
    }

   .box11{
    grid-area:box1;
   }
    .box12{
    grid-area:box2;
    }
  .box13{
    grid-area:box3;
  }
  .box14 {
    grid-area:box4;
  }
}

[mirrortorrent]

first off @sunright you have spent way too much time helping me out, Thank you! made some adjustments think it flows better, if you like take a look see what you would change. Feedback is welcome.

(what I have so far) http://codepen.io/mirrortorrent/pen/eWrErp?editors=1100

(A layout I want) www.a2hosting.com

I do want to learn more grids but with so little resource I find myself more stumped with no answer.

[rachelandrew]

Closing as no reduced case provided. As mentioned in the Readme this is not the place for questions that involve "I want to build this entire layout". Feel free to raise individual questions about specific aspects, that include a reduced test case of the issue at hand.