作者:手机用户新常态 | 来源:互联网 | 2023-01-03 23:09
想要为网格创建一个节标题(而不是通过将其放在节上方来占据垂直空间),如下所示:
当然很容易让第一列跨越行grid-rows: 1 / span 3
但是如果我转换文本并对齐/对齐它,则div不占用列的整个空间,因此设置背景/边框看起来不正确.
见试用笔
body {
padding: 1em;
font-family: sans-serif;
}
.my-grid {
display: grid;
grid-template-columns: 2rem 100px 10rem;
background-color: #eee
}
.my-grid>* {
border: 1px solid #ccc;
}
.section-title {
grid-row: 1 / span 5;
align-self: center;
justify-self: center;
transform: rotate(270deg);
background-color: papayawhip;
text-transform: uppercase;
}
input {
border: 2px solid #000;
}
1> Paulie_D..:
是的,使用 writing-mode
写入模式CSS属性定义文本行是水平放置还是垂直放置以及块进展的方向.
MDN
body {
padding: 1em;
font-family: sans-serif;
}
.my-grid {
display: grid;
grid-template-columns: 2rem 100px 10rem;
background-color: #eee
}
.my-grid>* {
border: 1px solid #ccc;
}
.section-title {
grid-row: 1 / span 5;
text-align: center;
writing-mode:vertical-rl; /* vertical text */
line-height:2rem; /* center in div */
transform:rotate(180deg); /* spin to orient as required */
background-color: papayawhip;
text-transform: uppercase;
}
input {
border: 2px solid #000;
}