I'm learning html/css vanilla design. My layout should be an header, a footer and 3 columns that fill all the space, whatever their content. I'm thinking in a layout grid-based for the 3 columns, and idea was to use display:flex;…
* { outline: 1px solid rgba(255, 0, 0, .2); } ol { *:not(li) { grid-area: none; /* hmmm... this is not right*/ } padding: 0; list-style: none; display: grid; grid-template-columns: min-content 1fr; grid-column: subgrid; li { grid-column: 1 / -1;…
It seems it just didn't fully understand the css grid mechanics. So here I am: ul{ display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); max-width: 888px; margin: 0 auto; } <ul> <li><a href="#">Aziende agricole</a></li> <li><a href="#">Dove mangiare</a></li> <li><a…
Obviously is something more complicated but i'd like a clear and simple description I tried with grid and flexbox layout, setted "align-self: center" to the right box, but nothing happens, asked to ChatGPT and Perplexity too but I'm stuck. I…
I have this HTML / CSS snippet: .test123 { grid-template-columns: 255px 255px; transition: 200ms; display: grid; gap: 30px; .card { border-radius: 50px; border: 1px solid #BBD0FB; } .c1 { background-color: red; width: 100%; height: 100px; } .c2 { background-color: blue;…
I want to have the ability to do full bleeds (displaying an item from edge to edge on the viewport) within my grid setup. I would like to have the item with the class full-bleed to span the design-grid and…
I'd like to make a css grid with cells having a collapsed light grey border, but one cell that is in focus to have a blue border. Here is an example: body { margin: 25px; background-color: #ddd; } .grid {…
I was tasked with changing given code that was using CSS grid to one using CSS flexbox layout. This was the given HTML structure: <div class="listing-grid"> <div class="listing"> <img class="listing-image" src="something.jpg" alt="something"> <div class="listing-details"> <h3>Item 1</h3> </div> <div class="listing-price"> <p>Price:…
I have a grid. Each cell will be an image with a max-width (used simple colored div in ex). Is there a way to have the grid automatically add another column when the images reach their max-width instead of just…
I have 6 images that I want to align with grid-template-areas. The problem is when I set one image to cover a bigger grid-area, the next image does not move to the next grid area but overlaps the bigger image.…