使用媒體查詢，當屏幕寬度大於或等於 600 像素時，如何制作使用網格布局來布局標簽和表單元素的表單？

Question

我的代碼正確嗎？ 我有點困惑，因為我不完全確定僅列出表單類是否意味着表單中的標簽和元素也將調整為網格布局。

@media only screen and (min-width: 600px) {
.form {
display:grid}
}

Answer 1

您在此處的代碼將為任何具有“表單”類的元素提供網格在 600 像素及以上寬的屏幕上的顯示屬性。 但是表單元素本身會發生什么取決於表單中包含的實際 html 標記。 在您的示例中，具有表單類的元素的所有 DIRECT 繼承者都將成為網格項目，但這也不會自動延續到這些項目的繼承者。

假設您有 6 個文本字段，每個字段都有一個標簽。 您可能希望將每個標簽和字段對包裝在一個 div 中，並將它們作為 .form 的直接子級。 然后，您將在表單中有 6 個 div 來設置您的網格布局，並且每個網格項將包含該字段所需的所有實際表單標記。

在此示例中，您應該在 3 列中看到 6 個網格項。

*你不需要第二或第三個 CSS 聲明，這些只是為了讓這個例子更漂亮一點。

 @media only screen and (min-width: 600px) { .form { display: grid; grid-gap: 20px; grid-template-columns: 2fr 2fr 2fr; } .form > div { border: 1px solid #ccc; padding: 10px; } .form > div > * { display: block; } }

 <form class="form"> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> <div> <label>Field name</label> <input type="text" /> </div> </form>