snailsmall612/css_grid.html Secret

## css_grid.html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <title>grid</title>
        <style>
            body{
                margin: 0;
            }

            .container{
                display: grid;
                grid-template-columns: repeat(4, 1fr); /*設定 Grid 為4欄，每欄寬度為四分之一。 等同於 grid-template-columns: 1fr 1fr 1fr 1fr*/
                column-gap: 50px; /* 設定欄位間的左右間距 (不含最左/最右) */
                row-gap: 30px; /* 設定欄位間上下間距 (不含最上/最下) */
            }

            .container div{
                border: black solid 1px;
                height: 200px;
            }

            @media (max-width: 1200px) {
                .container{
                    grid-template-columns: repeat(3, 1fr);
                }
            }


            @media (max-width: 800px) {
                .container{
                    grid-template-columns: repeat(2, 1fr);
                }
            }


            @media (max-width: 400px) {
                .container{
                    grid-template-columns: repeat(1, 1fr);
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
	<title>grid</title>
	<style>
	body{
	margin: 0;
	}

	.container{
	display: grid;
	grid-template-columns: repeat(4, 1fr); /設定 Grid 為4欄，每欄寬度為四分之一。等同於 grid-template-columns: 1fr 1fr 1fr 1fr/
	column-gap: 50px; /* 設定欄位間的左右間距 (不含最左/最右) */
	row-gap: 30px; /* 設定欄位間上下間距 (不含最上/最下) */
	}

	.container div{
	border: black solid 1px;
	height: 200px;
	}

	@media (max-width: 1200px) {
	.container{
	grid-template-columns: repeat(3, 1fr);
	}
	}


	@media (max-width: 800px) {
	.container{
	grid-template-columns: repeat(2, 1fr);
	}
	}


	@media (max-width: 400px) {
	.container{
	grid-template-columns: repeat(1, 1fr);
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	</div>
	</body>
	</html>