css-grid

I've got a nifty responsive css template using css grids and I'd like to make the header of this responsive css grid sticky, but because of the way the header and nav is designed, I can't get it to use fixed positioning. is there a better way of doing this with some grid property I might not have seen yet? * { margin: 0; padding: 0; } body { display: grid; font-family: sans-serif; } a { text-decoration: none; color: white; } header, nav { background: blue; color: #fff; position: fixed; } nav { display: flex; flex-wrap: wrap; align-items: center; } nav span { margin-right: auto; } header {

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-color: tomato; } <div class="grid"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> This creates 2 rows, first is 100px height, second is auto-created with 60px height. 2 columns in the second row have 1fr width. Is this possible via CSS Grid/Flexbox to horizontally center 2 columns in the 2nd row? I.e. have a varying number of columns per row. I am stuck trying to solve

I'm building a responsive template with CSS Grid Layout (still learning) and thanks to a few of you on here, I've got most of it working. mobile (max-width: 767px) everything should appear on its own row tablet (min-width: 768px) nav is on the first row aside and main on the second desktop (min-width: 992px) same as tablet but with 10% of spacing horizontally xl desktop (min-width: 1920px) same as desktop but has a max-width of 1920px The thing is I'm using a header tag to color the spacing to the left and right of the nav . Whether I use a header or a div, it doesn't seem right having an

In a flex container I have 5 items with a column direction but in a certain width I want to display 3 per column and force the others to wrap is there any way to do that without fixed height ? my code : <div class="container"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> </div> .container { display: flex; flex-flow: column wrap; } @media (min-width: 30em) { } js Bin: http://jsbin.com/fesujifelu/edit?html,css,output In flexbox, items need a height /

I'm trying to create layout like this: Orange blocks on the right side all have the same aspect ratio and thus height. Blue block has different aspect ratio. Height of blue block and summ of orange blocks should be equal, as shown on the image. Is there a way to create such layout via CSS grid? I know that I can wrap orange items in a separate column element, but I'd like to avoid this. I also managed to create this layout when aspect ratio of each item is square, but no luck with this one... Example on jsfiddle http://jsfiddle.net/fq974gov/ .grid { display: grid; grid-gap: 10px; width: 200px;

I am playing around with CSS grids. When I view it on a desktop size (min-width: 769px) I have a single row with 3 columns - something like this: --------------------------------------------- | col 1 | col 2 | col 3 | | | | | --------------------------------------------- Can I with css-grid move the columns around so I can do something like this on a mobile layout: --------------------------------------------- | col 1 | col 3 | | | | --------------------------------------------- | col 2 | --------------------------------------------- I know I span cells with something like this: .content{ grid