css-grid

I have a flex-box problem. Can anyone point me in the right direction? It might even be that flex-box cannot solve this situation because of the way it works. I want to display content across 4 columns. Have the content be listed in a columnar format and wrap to the next column when running out of room. display: flex; flex-direction: column; flex-wrap: wrap; height:<##>px should take care of this. But this is where things get tricky. What if I don't want a fixed height, but one that grows/shrinks based on the length of the content? Have the container's height be dynamic. Like in Case B, the

.parent { position:fixed; width:100%; left:0; top:14px; display:grid; grid-template-columns:40% 60%; grid-gap:5px; background:#eee; } .left { border:2px solid red; } .right { border:2px solid red; } <div class='parent'> <div class='left'>LEFT</div> <div class='right'>RIGHT</div> </div> if position is not fixed there is no problem, but if position is fixed - parent is not entire visible on the right side. The issue isn't with width:100% like you think. It is with grid-template that you made 40% 60% and you also have a grid-gap of 5px which will make the total more than 100% . Instead rely on

With the repeat() and auto-fit / auto-fill functions it's easy to get grid items to wrap when there is a defined length pattern for the columns or rows . In the example below, all columns are a minimum width of 100px and maximum width of 1fr. jsFiddle demo #grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 1em; } #grid > div { background-color: #ccddaa; padding: 10px; } <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> But when the tracks have no length pattern (i.e.,

I know there are similar questions but this is specifically asking how to do this using CSS Grid Layout. So we have this basic grid setup: HTML (with sidebar): <div class="grid"> <div class="content"> <p>content</p> </div> <div class="sidebar"> <p>sidebar</p> </div> </div> CSS: .grid { display: grid; grid-template-columns: 1fr 200px; } To create a layout that looks something like this: | content | sidebar | If the page doesn't have a sidebar though, ie. the html looks like this but with the same CSS: HTML (no sidebar): <div class="grid"> <div class="content"> <p>content</p> </div> </div> The

I'm having trouble with a CSS grid element's height. The code I am using is: .gridContainer { border: thin solid black; background: rgba(255, 0, 0, 0.5); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100px; height: 100px; grid-template-areas: 'windowContentHolder'; } .gridItem { grid-area: windowContentHolder; background: rgba(255, 255, 0, 0.5); width: 200%; height: 200%; overflow: auto; } .content { background: rgba(255, 0, 0, 0.5); } <div class="gridContainer"> <div class="gridItem"> <div class="content">hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi<br/>hi

I'm creating a layout using CSS Grids, and I want to have different space between each row. I can create the layout fine by just using margin on each element, but this kind of obscures the simplicity of the code. Is there any grid tricks I can do achieve this, grid-row-gap only seems to take one value, which it uses for all rows. What I'm trying to achieve is a layout like this: https://jsfiddle.net/8swzgk0b/1/ .grid { display: grid; grid-template-columns: auto 25% 25%; grid-template-rows: auto auto auto; width 100%; margin: 20px; grid-column-gap: 40px; /* grid-row-gap: 40px 60px; */ } div {

I have a sequence of articles inside a div of 4+ length, without any rounding row tag. I need to represent it as a table of 3 articles (columns) per row, probably with display: grid . Every article has a header, a section and a footer. How would I implement an equal height for each header, an equal height for each section, and an equal height footer, aligned to the bottom of the article, inside each row of articles? Is it even possible? Should I use display: table ? PS I need to change the number of articles per row dynamically, depending on screen width. Thanx. HTML: body { width: 100%; max