大家好!
任务是这样的,有一个简单的网格网格,里面有 1 列和 2 个元素。缩小屏幕时,文本会跳到另一行,从而增加块本身。但并非所有元素都有那么多文本。我需要使所有网格项具有相同的高度,并且该高度由内部的内容决定。尝试了很多选项,到目前为止没有任何效果。
你不能硬编码高度,你不能使用位置:绝对。粗略的说,414px的屏幕宽度,从列表中卡片的高度是104px(大小由内容决定),当屏幕宽度缩小到320px时,几个元素变成128px,那些不够用的元素内容保持 104 像素。@media - 也不能使用请求。
const WrapperWithLink = styled(Link)`
display: grid;
align-items: center;
justify-items: end;
grid-template-columns: 2fr 1fr;
border-radius: ${theme.radiuses.lg}px;
box-shadow: ${theme.shadows.cardDefault};
margin-bottom: ${theme.spacings.xs}px;
color: inherit;
&:hover {
text-decoration: none;
}
`
const Header = styled(SmartText)`
justify-self: start;
align-self: start;
padding: ${theme.spacings.xs}px;
`
const CustomImage = styled(Image)`
object-fit: scale-down;
z-index: ${theme.z_indexes.med};
width: 100px;
height: 100px;
`
我正在使用样式组件