英文:
HTML/CSS - Grid Layout Not Responsive
问题
当我调整textarea元素的大小时，其他元素不具有响应性。选择的textarea和其旁边的textarea之间突然出现了间隙。
lang-css 部分:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.grid-container {
position: relative;
background-color: pink;
display: grid;
padding: 20px;
grid-template-columns: auto auto auto auto auto auto;
text-align: center;
}
.item {
background-color: green;
border: 1px solid black;
font-size: 40px;
resize: horizontal;
}
lang-html 部分:
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<div class="grid-container">
<textarea class="item" id="item1">1</textarea>
<textarea class="item" id="item2">2</textarea>
<textarea class="item" id="item3">3</textarea>
<textarea class="item" id="item4">4</textarea>
<textarea class="item" id="item5">5</textarea>
<textarea class="item" id="item6">6</textarea>
<textarea class="item" id="item7">7</textarea>
<textarea class="item" id="item8">8</textarea>
<textarea class="item" id="item9">9</textarea>
<textarea class="item" id="item10">10</textarea>
<textarea class="item" id="item10">11</textarea>
<textarea class="item" id="item10">12</textarea>
</div>
英文:
When I resize the textarea element the other elements are not responsive. A sudden gap appears between the selected textarea and the textarea next to it.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.grid-container {
position: relative;
background-color: pink;
display: grid;
padding: 20px;
grid-template-columns: auto auto auto auto auto auto;
text-align: center;
}
.item {
background-color: green;
border: 1px solid black;
font-size: 40px;
resize: horizontal;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<div class="grid-container">
<textarea class="item" id="item1">1</textarea>
<textarea class="item" id="item2">2</textarea>
<textarea class="item" id="item3">3</textarea>
<textarea class="item" id="item4">4</textarea>
<textarea class="item" id="item5">5</textarea>
<textarea class="item" id="item6">6</textarea>
<textarea class="item" id="item7">7</textarea>
<textarea class="item" id="item8">8</textarea>
<textarea class="item" id="item9">9</textarea>
<textarea class="item" id="item10">10</textarea>
<textarea class="item" id="item10">11</textarea>
<textarea class="item" id="item10">12</textarea>
</div>
<!-- end snippet -->
答案1
得分: 1
以下是您要求的翻译部分：
"The gap appears because of textareas in the same column and different row. You better use flex instead of grid."
"因为位于同一列但不同行的文本区域，所以出现了间隙。最好使用 flex 而不是 grid。"
"In the snippet bellow, I created the two lines by separating items into two different divs. A more responsive way would be to use just one div, combined with flex-basis and flex-wrap on children."
"在下面的示例中，我通过将项目分为两个不同的 div 来创建了两行。更具响应性的方法是只使用一个 div，并在子元素上结合使用 flex-basis 和 flex-wrap。"
英文:
The gap appears because of textareas in the same column and different row. You better use flex instead of grid.<br/>
In the snippet bellow, I created the two lines by separating items into two different divs. A more responsive way would be to use just one div, combined with flex-basis and flex-wrap on children.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.flex-container {
position: relative;
background-color: pink;
display: flex;
padding: 20px;
grid-template-columns: auto auto auto auto auto auto;
text-align: center;
}
.flex-container:not(:last-child) {
padding-bottom: 0;
}
.flex-container:not(:first-child) {
padding-top: 0;
}
.item {
background-color: green;
border: 1px solid black;
font-size: 40px;
resize: horizontal;
}
<!-- language: lang-html -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<div class="flex-container">
<textarea class="item" id="item1">1</textarea>
<textarea class="item" id="item2">2</textarea>
<textarea class="item" id="item3">3</textarea>
<textarea class="item" id="item4">4</textarea>
<textarea class="item" id="item5">5</textarea>
<textarea class="item" id="item6">6</textarea>
</div>
<div class="flex-container">
<textarea class="item" id="item7">7</textarea>
<textarea class="item" id="item8">8</textarea>
<textarea class="item" id="item9">9</textarea>
<textarea class="item" id="item10">10</textarea>
<textarea class="item" id="item10">11</textarea>
<textarea class="item" id="item10">12</textarea>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论