grid布局能实现这个这个效果吗？

Z时代
2024-01-10
分类：技术分享

想做一个自适应的布局视口宽度小于500px时想让index里面的子元素纵向排列宽度100% grid能实现吗？
grid布局能实现这个这个效果吗？

<!DOCTYPE html>
<meta name="viewport" content="width-device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no, minimal-ui">
<html>
<head>
<title>grid布局</title>
<style type="text/css">
*{margin: 0;padding: 0}
.index{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.index div{
display: grid;
align-items: center;
justify-items: center;
}
.index div:first-child{
background-color: blue;
}
.index div:nth-child(2){
background-color: red;
}
.index div:nth-child(3){
background-color: yellow;
}
</style>
</head>
<body>
<div class="index">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body></html>