CSS Grid Layout issue caused by conflicting styles while using a framework

Question

I am experimenting with a CSS framework called pico.css. I have begun to design the layout using a separate custom stylesheet which is overriding some of the default styling provided from the pico stylesheet.

I have created a grid container in my custom stylesheet to layout the elements as follows:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 200px);
    grid-column-gap: var(--grid-spacing-horizontal);
    grid-row-gap: var(--grid-spacing-vertical);
    grid-template-areas:
        "image text  text"
        "image name  name"
        "image email email"
        "image phone phone"
        "image pass  pass"
        "image btn   btn";
}

The children have the following rules applied:

/* image */
.grid-item-1 {
    grid-area: image;
}

/* text */
.grid-item-2 {
    grid-area: text;
}

/* first and last name */
.grid-item-3 {
    grid-area: name;
}

/* email and phone */
.grid-item-4 {
    grid-area: email;
}

/* passwords */
.grid-item-5 {
    grid-area: pass;
}

/* submit button */
.grid-item-6 {
    grid-area: btn;
}

The problem

The layout isn't displaying as I expected and I am having issues debugging whats causing it. I believe there are some conflicting styles coming from the main pico.slim.css stylesheet but I am unsure what to change. This is the layout I am trying to achieve:

Example

For clarity please refer to this Codepen link which shows the current layout issue I describe. At the bottom under the comment /* CUSTOM CSS */ are the additional css styles I've applied.

What I've tried

I have played with the grid-template-rows: repeat(6, 1fr); to be grid-template-rows: repeat(6, 200px); which helps position the element closer to the grid-item-1 however the height of .grid-item-2 is pushing the rest of the elements too far down the page. Additionally is appears as if all the following elements are being placed into .grid-item-3 instead of following the grid structure defined in my custom css.

I've experimented with removing the container class style provided by pico.css but there was no improvement.

I've tried marking various parts of the CSS with !important but am unable to rectify using this method.

I've been looking at the code in Firefox devtools to try to discover which style is conflicting but I am unable to see what's causing the issue. I've been stuck on this since yesterday and feel I have reached the point where I am unable to resolve this problem by myself.

:root {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --line-height: 1.5;
  --font-weight: 400;
  --font-size: 16px;
  --border-radius: 0.25rem;
  --border-width: 1px;
  --outline-width: 3px;
  --spacing: 1rem;
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
  --grid-spacing-vertical: 0;
  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --nav-element-spacing-vertical: 1rem;
  --nav-element-spacing-horizontal: 0.5rem;
  --nav-link-spacing-vertical: 0.5rem;
  --nav-link-spacing-horizontal: 0.5rem;
  --form-label-font-weight: var(--font-weight);
  --transition: 0.2s ease-in-out;
  --modal-overlay-backdrop-filter: blur(0.25rem);
}

@media (min-width: 576px) {
   :root {
    --font-size: 17px;
  }
}

@media (min-width: 768px) {
   :root {
    --font-size: 18px;
  }
}

@media (min-width: 992px) {
   :root {
    --font-size: 19px;
  }
}

@media (min-width: 1200px) {
   :root {
    --font-size: 20px;
  }
}

a {
  --text-decoration: none;
}

a.secondary,
a.contrast {
  --text-decoration: underline;
}

small {
  --font-size: 0.875em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --font-weight: 700;
}

h1 {
  --font-size: 2rem;
  --typography-spacing-vertical: 3rem;
}

h2 {
  --font-size: 1.75rem;
  --typography-spacing-vertical: 2.625rem;
}

h3 {
  --font-size: 1.5rem;
  --typography-spacing-vertical: 2.25rem;
}

h4 {
  --font-size: 1.25rem;
  --typography-spacing-vertical: 1.874rem;
}

h5 {
  --font-size: 1.125rem;
  --typography-spacing-vertical: 1.6875rem;
}

[type=checkbox],
[type=radio] {
  --border-width: 2px;
}

[type=checkbox][role=switch] {
  --border-width: 3px;
}

thead th,
thead td,
tfoot th,
tfoot td {
  --border-width: 3px;
}

:not(thead, tfoot)>*>td {
  --font-size: 0.875em;
}

pre,
code,
kbd,
samp {
  --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
  --font-weight: bolder;
}

progress,
[type=checkbox],
[type=radio],
[type=range] {
  accent-color: var(--primary);
}


/**
 * Document
 * Content-box & Responsive typography
 */

*,
*::before,
*::after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:where(:root) {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--background-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-family);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  cursor: default;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}


/**
 * Sectioning
 * Container and responsive spacings for header, main, footer
 */

main {
  display: block;
}

body {
  width: 100%;
  margin: 0;
}

body>header,
body>main,
body>footer {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: var(--block-spacing-vertical) 0;
}


/**
* Container
*/

.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing);
  padding-left: var(--spacing);
}

@media (min-width: 576px) {
  .container {
    max-width: 510px;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 700px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 920px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1130px;
  }
}


/**
 * Section
 * Responsive spacings for section
 */

section {
  margin-bottom: var(--block-spacing-vertical);
}


/**
* Grid
* Minimal grid system with auto-layout columns
*/

.grid {
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  }
}

.grid>* {
  min-width: 0;
}


/**
 * Horizontal scroller (<figure>)
 */

figure {
  display: block;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

figure figcaption {
  padding: calc(var(--spacing) * 0.5) 0;
  color: var(--muted-color);
}


/**
 * Typography
 */

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-style: normal;
  font-weight: var(--font-weight);
  font-size: var(--font-size);
}

a,
[role=link] {
  --color: var(--primary);
  --background-color: transparent;
  outline: none;
  background-color: var(--background-color);
  color: var(--color);
  -webkit-text-decoration: var(--text-decoration);
  text-decoration: var(--text-decoration);
}

a:is([aria-current],
 :hover,
 :active,
 :focus),
[role=link]:is([aria-current],
 :hover,
 :active,
 :focus) {
  --color: var(--primary-hover);
  --text-decoration: underline;
}

a:focus,
[role=link]:focus {
  --background-color: var(--primary-focus);
}

a.secondary,
[role=link].secondary {
  --color: var(--secondary);
}

a.secondary:is([aria-current],
 :hover,
 :active,
 :focus),
[role=link].secondary:is([aria-current],
 :hover,
 :active,
 :focus) {
  --color: var(--secondary-hover);
}

a.secondary:focus,
[role=link].secondary:focus {
  --background-color: var(--secondary-focus);
}

a.contrast,
[role=link].contrast {
  --color: var(--contrast);
}

a.contrast:is([aria-current],
 :hover,
 :active,
 :focus),
[role=link].contrast:is([aria-current],
 :hover,
 :active,
 :focus) {
  --color: var(--contrast-hover);
}

a.contrast:focus,
[role=link].contrast:focus {
  --background-color: var(--contrast-focus);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: var(--typography-spacing-vertical);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  font-family: var(--font-family);
}

h1 {
  --color: var(--h1-color);
}

h2 {
  --color: var(--h2-color);
}

h3 {
  --color: var(--h3-color);
}

h4 {
  --color: var(--h4-color);
}

h5 {
  --color: var(--h5-color);
}

h6 {
  --color: var(--h6-color);
}

:where(address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul)~ :is(h1,
h2,
h3,
h4,
h5,
h6) {
  margin-top: var(--typography-spacing-vertical);
}

hgroup,
.headings {
  margin-bottom: var(--typography-spacing-vertical);
}

hgroup>*,
.headings>* {
  margin-bottom: 0;
}

hgroup>*:last-child,
.headings>*:last-child {
  --color: var(--muted-color);
  --font-weight: unset;
  font-size: 1rem;
  font-family: unset;
}

p {
  margin-bottom: var(--typography-spacing-vertical);
}

small {
  font-size: var(--font-size);
}

:where(dl,
ol,
ul) {
  padding-right: 0;
  padding-left: var(--spacing);
  -webkit-padding-start: var(--spacing);
  padding-inline-start: var(--spacing);
  -webkit-padding-end: 0;
  padding-inline-end: 0;
}

:where(dl,
ol,
ul) li {
  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}

:where(dl,
ol,
ul) :is(dl,
ol,
ul) {
  margin: 0;
  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}

ul li {
  list-style: square;
}

mark {
  padding: 0.125rem 0.25rem;
  background-color: var(--mark-background-color);
  color: var(--mark-color);
  vertical-align: baseline;
}

blockquote {
  display: block;
  margin: var(--typography-spacing-vertical) 0;
  padding: var(--spacing);
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
  -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  border-inline-start: 0.25rem solid var(--blockquote-border-color);
  -webkit-border-end: none;
  border-inline-end: none;
}

blockquote footer {
  margin-top: calc(var(--typography-spacing-vertical) * 0.5);
  color: var(--blockquote-footer-color);
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

ins {
  color: var(--ins-color);
  text-decoration: none;
}

del {
  color: var(--del-color);
}

::-moz-selection {
  background-color: var(--primary-focus);
}

::selection {
  background-color: var(--primary-focus);
}


/**
 * Embedded content
 */

:where(audio,
canvas,
iframe,
img,
svg,
video) {
  vertical-align: middle;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

:where(iframe) {
  border-style: none;
}

img {
  max-width: 100%;
  height: auto;
  border-style: none;
}

:where(svg:not([fill])) {
  fill: currentColor;
}

svg:not(:root) {
  overflow: hidden;
}


/**
 * Button
 */

button {
  margin: 0;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button {
  display: block;
  width: 100%;
  margin-bottom: var(--spacing);
}

[role=button] {
  display: inline-block;
  text-decoration: none;
}

button,
input[type=submit],
input[type=button],
input[type=reset],
[role=button] {
  --background-color: var(--primary);
  --border-color: var(--primary);
  --color: var(--primary-inverse);
  --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
}


/**
 * Form elements
 */

input,
optgroup,
select,
textarea {
  margin: 0;
  font-size: 1rem;
  line-height: var(--line-height);
  font-family: inherit;
  letter-spacing: inherit;
}

input {
  overflow: visible;
}

select {
  text-transform: none;
}

legend {
  max-width: 100%;
  padding: 0;
  color: inherit;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  padding: 0;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

:-moz-focusring {
  outline: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

::-ms-expand {
  display: none;
}

[type=file],
[type=range] {
  padding: 0;
  border-width: 0;
}

input:not([type=checkbox],
[type=radio],
[type=range]) {
  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
}

fieldset {
  margin: 0;
  margin-bottom: var(--spacing);
  padding: 0;
  border: 0;
}

label,
fieldset legend {
  display: block;
  margin-bottom: calc(var(--spacing) * 0.25);
  font-weight: var(--form-label-font-weight, var(--font-weight));
}

input:not([type=checkbox],
[type=radio]),
select,
textarea {
  width: 100%;
}

input:not([type=checkbox],
[type=radio],
[type=range],
[type=file]),
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
}

input,
select,
textarea {
  --background-color: var(--form-element-background-color);
  --border-color: var(--form-element-border-color);
  --color: var(--form-element-color);
  --box-shadow: none;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
}

input:not([type=submit],
[type=button],
[type=reset],
[type=checkbox],
[type=radio],
[readonly]):is(:active,
 :focus),
:where(select,
textarea):is(:active,
 :focus) {
  --background-color: var(--form-element-active-background-color);
}

input:not([type=submit],
[type=button],
[type=reset],
[role=switch],
[readonly]):is(:active,
 :focus),
:where(select,
textarea):is(:active,
 :focus) {
  --border-color: var(--form-element-active-border-color);
}

input:not([type=submit],
[type=button],
[type=reset],
[type=range],
[type=file],
[readonly]):focus,
select:focus,
textarea:focus {
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
}

input:not([type=submit],
[type=button],
[type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit],
[type=button],
[type=reset]),
select,
textarea) {
  --background-color: var(--form-element-disabled-background-color);
  --border-color: var(--form-element-disabled-border-color);
  opacity: var(--form-element-disabled-opacity);
  pointer-events: none;
}

:where(input,
select,
textarea):not([type=checkbox],
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week])[aria-invalid] {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

:where(input,
select,
textarea):not([type=checkbox],
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week])[aria-invalid=false] {
  background-image: var(--icon-valid);
}

:where(input,
select,
textarea):not([type=checkbox],
[type=radio],
[type=date],
[type=datetime-local],
[type=month],
[type=time],
[type=week])[aria-invalid=true] {
  background-image: var(--icon-invalid);
}

:where(input,
select,
textarea)[aria-invalid=false] {
  --border-color: var(--form-element-valid-border-color);
}

:where(input,
select,
textarea)[aria-invalid=false]:is(:active,
 :focus) {
  --border-color: var(--form-element-valid-active-border-color);
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);
}

:where(input,
select,
textarea)[aria-invalid=true] {
  --border-color: var(--form-element-invalid-border-color);
}

:where(input,
select,
textarea)[aria-invalid=true]:is(:active,
 :focus) {
  --border-color: var(--form-element-invalid-active-border-color);
  --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);
}

[dir=rtl] :where(input,
select,
textarea):not([type=checkbox],
[type=radio]):is([aria-invalid],
[aria-invalid=true],
[aria-invalid=false]) {
  background-position: center left 0.75rem;
}

input::placeholder,
input::-webkit-input-placeholder,
textarea::placeholder,
textarea::-webkit-input-placeholder,
select:invalid {
  color: var(--form-element-placeholder-color);
  opacity: 1;
}

input:not([type=checkbox],
[type=radio]),
select,
textarea {
  margin-bottom: var(--spacing);
}

select::-ms-expand {
  border: 0;
  background-color: transparent;
}

select:not([multiple],
[size]) {
  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-left: var(--form-element-spacing-horizontal);
  -webkit-padding-start: var(--form-element-spacing-horizontal);
  padding-inline-start: var(--form-element-spacing-horizontal);
  -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  background-image: var(--icon-chevron);
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}

[dir=rtl] select:not([multiple],
[size]) {
  background-position: center left 0.75rem;
}

:where(input,
select,
textarea,
.grid)+small {
  display: block;
  width: 100%;
  margin-top: calc(var(--spacing) * -0.75);
  margin-bottom: var(--spacing);
  color: var(--muted-color);
}

label> :where(input,
select,
textarea) {
  margin-top: calc(var(--spacing) * 0.25);
}


/**
 * Table
 */

:where(table) {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-indent: 0;
}

th,
td {
  padding: calc(var(--spacing) / 2) var(--spacing);
  border-bottom: var(--border-width) solid var(--table-border-color);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  text-align: left;
  text-align: start;
}

tfoot th,
tfoot td {
  border-top: var(--border-width) solid var(--table-border-color);
  border-bottom: 0;
}

table[role=grid] tbody tr:nth-child(odd) {
  background-color: var(--table-row-stripped-background-color);
}


/**
 * Accessibility & User interaction
 */

[aria-controls] {
  cursor: pointer;
}

[aria-disabled=true],
[disabled] {
  cursor: not-allowed;
}

[aria-hidden=false][hidden] {
  display: initial;
}

[aria-hidden=false][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
}

[dir=rtl] {
  direction: rtl;
}


/* CUSTOM CSS */

[data-theme=light],
:root:not([data-theme=dark]) {
  --primary: hsl(329, 98%, 49%);
  --primary-hover: hsl(329, 90%, 40%);
  --primary-focus: rgba(217, 32, 107, 0.125);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: var(--grid-spacing-horizontal);
  grid-row-gap: var(--grid-spacing-vertical);
  grid-template-areas: "image text  text" "image name  name" "image email email" "image phone phone" "image pass  pass" "image btn   btn";
}


/* image */

.grid-item-1 {
  grid-area: image;
}


/* text */

.grid-item-2 {
  grid-area: text;
}


/* first and last name */

.grid-item-3 {
  grid-area: name;
}


/* email and phone */

.grid-item-4 {
  grid-area: email;
}


/* passwords */

.grid-item-5 {
  grid-area: pass;
}


/* submit button */

.grid-item-6 {
  grid-area: btn;
}

.main-img {
  border-radius: var(--border-radius);
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}


/* adds color fullstop after h1 */

h1::after {
  content: ".";
  color: var(--primary);
}

h1 {
  margin-bottom: var(--grid-spacing-horizontal);
}

.line-break {
  margin: 0;
}

<main class="container">
  <div class="grid-container">
    <div class="grid-item-1">
      <img class="main-img" src="https://scottwright-dev.github.io/hosted-assets/zak-7wBFsHWQDlk-unsplash.jpg" alt="abstract neon shapes">
    </div>
    <div class="grid-item-2">
      <h1>CircleSync</h1>
      <p class="line-break">Experience the precision and innovation of CircleSync.</p>
      <p class="line-break">Join our community and elevate your online presence with expert guidance and cutting-edge solutions.</p>
    </div>
    <form method="POST" action="#">
      <div class="grid-item-3">
        <label for="firstname">
                        First Name *
                        <input type="text" id="firstname" name="firstname" placeholder="Enter First Name" required>
                    </label>
        <label for="lastname">
                        Last Name *
                        <input type="text" id="lastname" name="lastname" placeholder="Enter Last Name" required>
                    </label>
      </div>
      <div class="grid-item-4">
        <label for="email">
                        Email *
                        <input type="email" id="email" name="email" placeholder="Enter Email" required>
                    </label>
        <label for="phone">
                        Phone
                        <input type="tel" id="phone" name="phone" placeholder="Enter Phone Number">
                    </label>
      </div>
      <div class="grid-item-5">
        <label for="password">
                        Password *
                        <input type="password" id="password" name="password" placeholder="Enter Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" required>
                    </label>
        <label for="password-confirm">
                        Confirm *
                        <input type="password" id="password-confirm" name="password-confirm" placeholder="Confirm" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" required>
                    </label>
      </div>
      <div class="grid-item-6">
        <small>* denotes required field</small>
        <button type="submit">Sign Up</button>
        <small>Already have an account? <a href="#">Log in</a></small>
      </div>
    </form>
  </div>
</main>

Answer 1

It's not the framework that's causing the problem.

Expected grid items are not grid items.

Although grid-item-1 (the image) and grid-item-2 (the text) are grid items—because they are children of the grid container—the other "grid items" (3, 4, 5 & 6) are not grid items, because they are children of the form element (which is the grid item).

It's important to remember that the scope of a grid formatting context is limited to a parent-child relationship.

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

Full explanation here:

• Grid properties not working on elements inside grid container

An exception to this rule would be display: contents, which enables the descendants of a grid container (beyond the children) to accept the commands of the grid container. Currently, however, this feature has low browser support.

display: subgrid is another feature currently under consideration and not available.

See here:

• Is there a "subgrid" feature, to position "grandchildren" of a grid container?
• What is an alternative to css subgrid?

Define the height.

There is no height set on the container.

Hence, the height is indefinite which can cause an overflow.

This is why your attempt at grid-template-rows: repeat(6, 200px) helped the situation.

Keep the original grid-template-rows: repeat(6, 1fr) and add height: 100vh to .grid-container.