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>

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

回答

以上是 grid布局能实现这个这个效果吗? 的全部内容, 来源链接: www.h5w3.com/112979.html

回到顶部