css-grid | Starter Files + Solutions to my CSSGridio Course

I am looking to add padding between elements of my form, as currently they are tight together. How can I adjust my css? Nothing has seemed to work thus far.

I would like the forgotten password the same proportional distance away from the button, but the button and form fields need more space between them.

Form is currently two columns, making the UI look awkward given there are just two form fields. I'm looking to make the field just one column given there are only two fields. How can I adjust?

Believe it has something to do with display: flex; but every alternate option I try, does not seem to work

I have a classic "top navigation bar - sidebar - main content" CSS grid layout which is also responsive and on smaller screens the sections are re-arranged vertically. The grid is styled to stretch out to the entire viewport. The main area is vertically scrollable if the content is longer than the viewport, whereas the top and side navigation bars are "pinned" to their positions and can't get smaller than their content in either direction.

To achieve the vertical scrolling in the main area, I've set the max-height property of the grid container to 100vh, and set the overflow-y property of the main element to auto. This max-height property, however, seems to have an adverse side-effect on the grid: the content can vertically overflow the grid container once the viewport's height becomes smaller than the minimum needed space to display the top navigation bar and sidebar (that can't shrink below their content).

This is what it looks like, for example, on a smaller screen, where the grid cells are stacked on top of each other:

The yellow overlay on the picture above is the scrolled-out part, not visible in the browser window. The main area is at the bottom with zero height (plus the border) but this is okay, as the main element is vertically scrollable and the grid row is set to have 1fr height. The black border is for the entire grid container. As the example shows, the sidebar and the main area is outside of the container.

The same thing on a larger screen, where the sidebar is moved to the left, looks like this:

What I would like to have, however, is that the grid cells don't overlap with the grid container but they are fully contained. That is, on a smaller screen with vertically stacked cells, this:

And on larger screens, with the sidebar on the left:

Can this be achieved using some modified version of the grid structure and CSS given below in the code snippet? So basically I would like to have a scrollable main area with top navigation bar and sidebar which can't shrink vertically below their minimum required height, and a grid container that doesn't overlap with its content. I'd like to avoid anything explicitly sized to a specific value (i.e. I would not like to use something like height: 120px.

Note, that this is a follow-up question on my previous one but it's not the same because I now have the requirement of a scrollable main area.

I have a school project where I am trying to make this website, but my html tag just jumps outside the css-grid. How can I fix this? Keep in mind that I am new to html/css so please try to answer in a simple way.

Here is a picture of how it looks:

Here is my code:

I would like to have a grid layout on a page where the grid stretches out to the entire viewport, and the rows have a minimum height. The simplest example would be a grid with a single cell (see code snippet below).

The problem I am having is that when the height of the viewport is less than the defined minimum row-height, the row vertically overflows its container. With the added red and green borders in the below example it's visible that the row's height isn't going below the defined 500 pixels, but the grid-container is still sized to the viewport which is now shorter than 500 pixels.

If I remove the height CSS attribute from the grid class, the container doesn't shrink below its content, but it also doesn't fill out the vertical space when the viewport is taller than 500 pixels. Since I want the grid to fill the entire page, I need the height CSS attribute. I've also added the min-height: fit-content attribute which is supposed to prevent the used value of the height property from becoming smaller than the value specified for min-height but it doesn't work (not with the defined fit-content value - it works as expected with an exact value, for example 300px).

In a similar question the culprit was the percentage values used for the gaps, but in this case there is nothing relatively sized. Even if replace the grid-template-rows: minmax(500px, 1fr); property with the fixed grid-template-rows: 500px;, it still behaves the same way.

I have a ul which in total contains 11 items.

I'm using display: grid in order to achieve a layout where the first column (of the two) contains 7 of the li elements.

I've tried to follow the approach here, by using grid-template-areas, but my left li's seem to overlap each other.

In short, I'm looking to have first column (left) with 7 items, and second column (right) with 4.

Demo:

I want to achieve a pretty simple layout using a css grid (not flexbox) :

Currently I have this (similar but with an unwanted empty white area):

My question is what is the missing part(s) in my exemple code to achieve the desired layout ?

The issue seems very similar to this question: How to make CSS Grid items take up remaining space?
And this one: How do you collapse unused row in a CSS grid?

I have a green div on the last row, this last row need to grow with the page height.
To do that the row template for this last row is set to 1fr.

You can check the very simple code snippet below:

The following script displays exactly the same on each side of the screen. What I am trying to discover is how to group one set of dl/dt/dd definitions to be left side as normal with the dd below the dt as multiple lines but another group that will show the dt/dd on the same single lines.
I cannot figure out how to create two different dt/dd displays for the same page.

If you execute the script with the dl/dt/dd section commented out and then a second time with it in you will see the effects I'm trying to achieve, but both the multiple line and single line displays occurring on the same page as the same display. I'm thinking that there must be a way to define the CSS statements to act differently at different places on the same page. Obviously I would not do the displays in a real project, the side-by-side display is for question demonstration purposes only. Is there a way to do this?

I tried creating a class with the modified dl/dt/dd statements and then be referenced as a class. That approach does not seem to work.

I'm trying to separate children of a container div into left/right columns, with no vertical whitespace below or above the children items.

I'll explain the setup and provide a picture of the desired result, and then I’ll explain every solution I’ve tried and why each solution doesn’t seem to work.

The Setup

I have a container with children