Hello guys in this tutorial we will create a responsive CSS Grid With No Media CSS
First, we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Responsive Grid Css</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class="row-outer">
<div class="container">
<div class="grid-wrapper">
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
</div>
</div>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
background: #f1f2f3;
}
.container {
width: 95%;
max-width: 1160px;
margin: auto;
}
.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-gap: 20px;
}
.box {
height: 250px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #4b00ff;
}
.row-outer {
padding: 50px 0;
}
Auto Responsive Video Output:
Auto Responsive Codepen Output:
Top comments (1)
Hey 👋🏼
This looks like a good post here. Can you share this in full on DEV?
DEV generally asks that folks share their posts in full if possible and there is tooling provided to make it so that it's relatively easy to repost from outside blogs.
Hope you'll consider sharing the full post going forward.