css-grid

I have this simple use case: an item title and description. The title should appear above the description and I want the title to determine the width of the entire column, also for the 'description' row. Is that possible with CSS Grid, and if so, how? This is the desired output: And that's the code, basically: .grid-container { display: grid; grid-template-columns: 1fr; } <div class="grid-container"> <div class="A"> DIV A contains the TITLE </div> <div class="B"> DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping) </div> </div> Instead of

I've read through A complete guide to Grid , but still confused with the differences between two sets of container properties, namely the " justify/align-items " vs. " justify/align-content ". My confusion revolves around the claim made by the author that the " -content " set are there because Sometimes the total size of your grid might be less than the size of its grid container I think this applies to both, not unique to the " -content " set. Could someone help explain this? Preferably using some graphical illustration as examples. Let's start with clarifying the terminology: Grid Container

Trying to group items in two separate line by CSS Grid using different class names. It works fine until in "red" group have no more elements then predefined rows (this case 3). Can I somehow put the 4th "red" element in new row? If there is only 3 "red" element, everything works fine. ul { display: grid; grid-template-columns: 1fr 1fr 1fr; } .blue { background-color: blue; } .red { background-color: red; grid-row-start: 5; } <ul> <li class="blue"> <h2>1</h2> </li> <li class="red"> <h2>2</h2> </li> <li class="blue"> <h2>3</h2> </li> <li class="blue"> <h2>4</h2> </li> <li class="red"> <h2>5</h2>

If you look at the example below, I want the headers ( h4.child-title ) to have the same length within the parent container. But I'm not successful in achieving this. Any help is appreciated. .top-level { display: flex; flex-flow: row wrap; } .section { display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; } .section-child { display: flex; flex-flow: column nowrap; align-items: center; flex: 1 1 0; } .child-title { white-space: nowrap; } .vertical-separator { width: 1px; background-color: rgba(0, 0, 0, 0.3); margin: 8px; } <div class="top-level">