Проблема с CSS Grid Layout, вызванная конфликтующими стилями при использовании фреймворка

Я экспериментирую с фреймворком CSS под названием pico.css. Я начал разрабатывать макет, используя отдельную пользовательскую таблицу стилей, которая переопределяет некоторые стили по умолчанию, предоставленные из таблицы стилей pico.

Я создал контейнер сетки в своей пользовательской таблице стилей, чтобы расположить элементы следующим образом:

.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";
}

К детям применяются следующие правила:

/* 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;
}

Проблема

Макет не отображается, как я ожидал, и у меня возникают проблемы с отладкой того, что его вызывает. Я считаю, что в основной таблице стилей pico.slim.css есть некоторые конфликтующие стили, но я не уверен, что нужно изменить. Это макет, который я пытаюсь достичь:

Проблема с CSS Grid Layout, вызванная конфликтующими стилями при использовании фреймворка

Пример

Для ясности, пожалуйста, обратитесь к этой ссылке Codepen, которая показывает текущую проблему макета, которую я описываю. Внизу под комментарием /* CUSTOM CSS */ указаны дополнительные стили CSS, которые я применил.

Что я пробовал

Я играл с grid-template-rows: repeat(6, 1fr);, чтобы быть grid-template-rows: repeat(6, 200px);, что помогает расположить элемент ближе к grid-item-1, однако высота .grid-item-2 отодвигает остальные элементы слишком далеко вниз по странице. Кроме того, выглядит так, как будто все следующие элементы помещаются в .grid-item-3 вместо того, чтобы следовать структуре сетки, определенной в моем пользовательском css.

Я экспериментировал с удалением стиля класса container, предоставленного pico.css, но улучшений не было.

Я пытался пометить различные части CSS с помощью !important, но не могу исправить это с помощью этого метода.

Я просматривал код в Firefox devtools, чтобы попытаться определить, какой стиль конфликтует, но я не могу понять, что вызывает проблему. Я застрял на этом со вчерашнего дня и чувствую, что достиг точки, когда я не могу решить эту проблему самостоятельно.

: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>

А вы пробовали !important?

— Rojo 19.04.2023 14:55

Извините, я забыл упомянуть об этом. Да, я пробовал помечать различные части CSS с помощью !important, но не могу исправить это с помощью этого метода.

— scott-ldn 19.04.2023 15:22
css css-grid
19.04.2023 12:59
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
2
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема не в фреймворке.

Ожидаемые элементы сетки не являются элементами сетки.

Хотя grid-item-1 (изображение) и grid-item-2 (текст) являются элементами сетки, поскольку они являются дочерними элементами контейнера сетки, другие «элементы сетки» (3, 4, 5 и 6) не являются элементами сетки, поскольку они являются дочерними элементами контейнера сетки. элемент form (который является элементом сетки).

Важно помнить, что область действия контекста форматирования сетки ограничена отношениями родитель-потомок.

Это означает, что контейнер сетки всегда является родительским, а элемент сетки всегда дочерним. Свойства сетки работают только в рамках этого отношения.

Потомки контейнера сетки за дочерними элементами не являются частью макета сетки и не будут принимать свойства сетки.

Полное объяснение здесь:

Исключением из этого правила будет display: contents, который позволяет потомкам грид-контейнера (помимо дочерних элементов) принимать команды грид-контейнера. Однако в настоящее время эта функция имеет низкую поддержку браузеров.

display: subgrid — еще одна функция, которая в настоящее время находится на рассмотрении и недоступна.

Глянь сюда:

Определите высоту.

На контейнере не указана высота.

Следовательно, высота не определена, что может привести к переполнению.

Вот почему ваша попытка grid-template-rows: repeat(6, 200px) помогла ситуации.

Сохраните исходный grid-template-rows: repeat(6, 1fr) и добавьте height: 100vh к .grid-container.

Это действительно полезно. Я вижу причину моей проблемы благодаря информации, представленной в вашем ответе. Спасибо!

— scott-ldn 19.04.2023 17:56
19.04.2023 15:48

Другие вопросы по теме

Отзывчивая сетка в нескольких разделах без таблицы стилей
Сделать сетку CSS последней строкой, чтобы заполнить незавершенные столбцы
Как выровнять столбцы сетки по базовой линии, сохраняя при этом их растянутыми?
Использование функции calc с единицами измерения fr
Css grid - как равномерно разделить по количеству элементов
Создайте сетку под флекс-боксом
Таблица HTML: отображать горизонтальное двоичное дерево через rowspan?
Как динамически изменить размер двух div, которые существуют друг над другом, чтобы они оставались одинаковой высоты по мере роста одного
CSS Grid — макет из двух столбцов с независимыми прокручиваемыми областями
Можем ли мы анимировать начало столбца сетки с помощью перехода CSS?

Похожие вопросы

Есть ли способ добавить единицу «px» в массив параметров для миксинов Sass?
Как уменьшить разрыв между сетками flex MUI?
Разделите html на три части с разной высотой
Небольшое поле слева, когда ширина div определена как 100%
Как отфильтровать строку на основе выпадающего списка, который мы выбираем?
Colspan для полустолбцов в нескольких строках
ToggleClass не работает с display:block
Вертикальное выравнивание входных тегов в css
Как применить пользовательскую тему Angular ко всем элементам?
Как разделить и выровнять текстовые блоки с анимацией