css-grid

I'd like to calculate the number of rows in a grid template using calc() , but trying to get the repeat count with division isn't working: .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; background: rgba(0, 0, 0, 0.2); } .grid>div { background: tomato; width: 20px; text-align: center; margin: auto; } .grid.no-calc { grid-template-rows: repeat(3, 30px); } .grid.addition { grid-template-rows: repeat(calc(1 + 2), 30px); } .grid.subtraction { grid-template-rows: repeat(calc(4 - 1), 30px); } .grid.multiplication { grid-template-rows: repeat(calc(3 * 1), 30px)

I need to use a grid layout but also need a horizontal line separating each row. The only thing I've been able to find is applying a border to each cell, but this only works if there are enough cells to fill each row. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .box { border-bottom: 2px solid #ffa94d; padding: 1em; } <div class="wrapper"> <div class="box">One</div> <div class="box">Two</div> <div class="box">Three</div> <div class="box">Four</div> </div> Is there a way to fix the above so that the entire row has a border? Add a grid

Wanted : a CSS only solution to enable equal height grid "sections" on a per row basis, that is also responsive. This diagram hopefully explains the requirement better than the words in this post will: The "item grid" should be responsive - in that it can show a different number of cards per row based on viewport width. And within a given row, the equivalent sections should have the same height on a "per row" basis. In the below HTML & CSS - the item cards are split in to the rows that we need (at the two example break points desktop & mobile) but the content section heights are variable (yuck

Please note, the following problem can be solved by using fr units instead of % and auto, but I am looking for an explanation as to why the problem occurs in the first place. In my code below, Firefox : Does not obey the values for grid-template-rows . Applies an equal height to each row but the grid items do not overflow the container. Chrome : Seems to obey the grid-template-rows property but the grid items overflow the container. Initially I thought the issue was with % but it is an allowable unit for the row. I swapped out the auto value for 10% but that created its own problem. I've

How do I achieve this layout drawn on the picture? E.g. 3 items on left side, one centered, 2 on the right. the ul is the orangish color and the black boxes are the items ul { display: flex; width: 100%; } <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> Flexbox Use 7 items. One in the center. Each side has 3. Hide one on the right with visibility: hidden . If you don't want to add a fake item in the DOM, then use a pseudo-element instead, also with visibility: hidden . More details here: Center and right align flexbox elements How can

I want my grid to maintain a certain ratio, but a long sentence increases the width of the grid it belongs to. body { display: grid; } main { grid-column: 1 / 8; border: 2px solid black; } aside { grid-column: 8 / 13; border: 2px solid black; } <main> <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam

I've created a grid layout following the newest CSS Grid spec, but am not completely familiar with it yet. I'm trying to create the following layout without having to define grid areas for each grid child. codepen body { max-width: 1024px; margin: 10px auto; } .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-template-areas: "a a b" "a a c" "d e f"; } .grid__thing { background-color: rebeccapurple; } .a { grid-area: a; } .b { grid-area: b; } .c { grid-area: c; } .d { grid-area: d; } .e { grid-area: e; } .f { grid-area: f; } img {