H5W3
当前位置:H5W3 > 问答 > 正文

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

想做一个自适应的布局 视口宽度小于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>

可以使用媒体查询判断屏幕的宽度。

回答

本文地址:H5W3 » grid布局能实现这个这个效果吗?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址