我正在尝试一个名为 pico.css 的 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";
}

children 适用以下规则:

/* 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 样式表中存在一些冲突的样式，但我不确定要更改什么。这是我想要实现的布局:

draft image of layout

示例

为了清楚起见，请参阅此 Codepen link这显示了我描述的当前布局问题。底部注释 /* 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 中定义的网格结构。

我尝试过删除 pico.css 提供的 container 类样式，但没有任何改进。

我尝试用 !important 标记 CSS 的各个部分，但无法使用此方法进行纠正。

我一直在查看 Firefox 开发工具中的代码，试图发现哪种样式发生冲突，但我无法看出是什么导致了问题。从昨天开始我就一直卡在这个问题上，感觉自己已经到了无法独自解决这个问题的地步了。

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

最佳答案

这不是导致问题的框架。

预期的网格项不是网格项。

虽然grid-item-1(图像)和grid-item-2(文本)是网格项——因为它们是网格容器的子项——其他“网格项”(3、4、5 和 6)不是网格项，因为它们是 form 元素(即网格项)的子元素。

请务必记住，网格格式化上下文的范围仅限于父子关系。

这意味着网格容器始终是父级，网格项始终是子级。网格属性仅在此关系内起作用。

子级之外的网格容器的后代不是网格布局的一部分，并且不会接受网格属性。

这里有完整的解释:

Grid properties not working on elements inside grid container

此规则的一个异常(exception)是 display:contents，它使网格容器的后代(子级之外)能够接受网格容器的命令。然而目前，此功能有 low browser support .

display: subgrid 是目前正在考虑但不可用的另一个功能。

看这里:

定义高度。

容器上没有设置高度。

因此，高度是不确定的，这可能会导致溢出。

这就是为什么您的 grid-template-rows: Repeat(6, 200px) 尝试对这种情况有所帮助。

保留原来的grid-template-rows:repeat(6, 1fr)并将height: 100vh添加到.grid-container。

关于使用框架时样式冲突导致的 CSS 网格布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76053703/

使用框架时样式冲突导致的 CSS 网格布局问题

问题

示例

我尝试过的

预期的网格项不是网格项。

定义高度。

上一篇：python - Annotate 和 Subquery 中的 Django Count 比简单地迭代我的项目并单独过滤要慢得多

下一篇：r - 连接分类时间序列的相邻点 - ggplot