CSS grid auto-flow reordering items
I'm trying to create an autoflow component to re-arrange content according to screen size. The content blocks always come in pairs: a text box and an image. On a desktop device, I want the layout to be | Text1 |…
How can I use CSS nth-child(odd) nth-child(even) to justify columns in a CSS grid? – Html
I have a CSS grid. I would like to use the nth-child odd and even selectors to make items be pushed up against each vertical edge of the grid - it should look like: .questionsAndAnswers { display: grid; grid-template-columns: repeat(2,…
grid doesn't cover entire screen – Html
I am using CSS grids to design my website. However, when I added the background color (hoping that it will cover the entire grid) it only covered part of it in each grid item. This is the CSS grid structure…
Make CSS grid last row to fill non-complete columns – Html
I am trying to make the CSS grid automatically size the final set of elements such that they autofill the last row if the amount of entries does not match the column count. See image:
How to align grid columns to the baseline while keeping them stretched? – Html
I have a grid with two columns. The second column has a larger font size: .container { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem; } .text1 { color: #fff; background-color: #000; } .text2 { font-size: 3.75rem; } <div class="container"> <div…
Using the calc function with fr units – CSS
I have a 3x3 css grid for which I want to have the respective two outer column and row sizes be calculated. The middle ones are 1fr. So far I have: (see also this codepen) html { --zoom-scale: 1; }…
Create a grid under a flex box – Html
I am currently creating a landing page for a website in which I used a flex display for one section. Below this section, I want to create a grid for another section, however the content is being display in between…
Failing to create a responsive grid area with an svg image – Html
In my attempt to create a responsive grid area with an svg image inside I have run into odd behaviour such as arbitrary grid area widths, and inability to have the image grow or shrink to a certain point than…
How to make a empty grid-template-row to fill up remaining space? – Html
How can I create a grid layout with 3 rows so that the rows fill the entire screen, even if the rows are empty? For example, header and footer have 100px and 50px. The middle grid row (main area) should…
HTML Grid of widgets over content without blocking
This is quite a tough case to explain, so I appreciate your patience. I want to have a grid of widgets, dynamically displayed and relatively positioned so I could place them dynamically where I want. These widgets will sit in…