时间戳

首页 > 解决方案 > 如何让我的 CSS Grid 布局响应式？

html - 如何让我的 CSS Grid 布局响应式？

问题描述

我的网站上的网格流有问题。我希望它反应灵敏；问题是我的页面目前没有响应。有任何想法吗？

/*body  styles*/
body{background-color:#4B88A2;font-family: 'Open Sans', sans-serif;font-size:16px;color: #FFF9FB;font-weight: 400;
	display: grid;
  grid: "header header"
        "nav nav"
        "content sidebar"
        "footer footer";
  grid-template-columns: 1fr 25%; }

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.content-wrap{max-width:950px; padding:50px;  margin:0 auto;overflow: auto;}
/*headers*/
h1 {font-family: 'Pacifico', cursive;font-size:80px;color:#BB0A21;}
h4{font-size:20px;color:#252627;}
.box{;margin:0;overflow: auto;}
.container{margin: 40px auto 0;
width:90%;}

header { grid-area: header; }
nav { grid-area: nav; }
footer { grid-area: footer; }

.element {
    padding: 20px;
    background-color: white;
    -moz-columns: 5em 3;
    -webkit-columns: 5em 3;
    columns: 5em 3;
    -webkit-column-gap: 1.5em;
    -moz-column-gap: 1.5em;
    column-gap: 1.5em;
    -webkit-column-rule: 3px dashed orange;
    -moz-column-rule: 3px dashed orange;
    column-rule: 3px dashed orange;
    text-align: justify;}

.grid-container {
  display: grid;
   grid-template-columns:1fr 1fr 1fr; 
  grid-template-rows: 300px 175px; 
  grid-column-gap: 10px; 
  grid-row-gap: 20px;
}

.grid-item {
  border: 1px solid #222;
  text-align: center;
}
h2 {
  margin: 10px 0;
  font-family: sans-serif;
  font-size: 14px;
}
img {
  width: 100%;
}
/*navigation*/
nav{margin-bottom:5px;}
nav{text-align:left;position: fixed;top:0;left:0; width:100%;background:#D3D4D9;  }
nav a{display:inline-block;
	padding:15px 20px;
	text-decoration:none;
text-transform: uppercase;
font-weight:bold;}
.nav-right{position:relative; top:0px; display:flex;}

/*box floats*/
#Next-skills-to-learn{display:inline-block;padding:10px;border: dotted 1px red;}
 /*footer*/
.footer{position:fixed;bottom:0;left: 0; width:100%;text-align: center;background:#252627;} 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 <!-- Font styles-->
  <link href="https://fonts.googleapis.com/css?family=Merienda|Open+Sans" rel="stylesheet">
    <link href="css/multiColumnTemplate.css" rel="stylesheet" type="text/css">
    <link href="css/normalized.css" rel="stylesheet" type="text/css">
	  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">



    <title>Hello, world!</title>
  </head>
  <body>
<div class="content-wrap">
	 <!--navigation-->
  <nav class="nav" id="menu">
	   <a href="about.html">About</a>
	   <a href="larry main.html">Home</a>
  <a href="portfolio.html">Work</a>
  <a href="#">Education</a>
	 <div class="nav-right" id="social links" style="float: right"> 
		 <i class="fab fa-instagram" style="font-size:30px;"></i>
		  <i class="fab fa-facebook-f" style="font-size:30px;color:blue;"></i>
<i class="fas fa-envelope" style="font-size:30px;color:red;"></i>



	   </div>
	  </nav>
		

	  
	  
	  <!-- navigationend-->   
	  
	  <!-- center alignigned pictures-->
<div class="grid-container">
	  <div class="grid-item">
	<img src="images/placeholder.jpg" alt="place holder">
		  <h2>Drawings</h2>
	</div>
	  
	 <div class="grid-item">
	<img src="images/placeholder.jpg" alt="place holder">
		  <h2>Websites</h2>
	</div>
	   <div class="grid-item">
	<img src="images/placeholder.jpg" alt="place holder">
		  <h2>Business cards</h2>
	</div>
	
		  <div class="grid-item">
	<img src="images/placeholder.jpg" alt="place holder">
		  <h2>Drawings</h2>
	</div>
	  
	 <div class="grid-item">
	<img src="images/placeholder.jpg" alt="place holder">
		  <h2>Websites</h2>
	</div>
	   <div class="grid-item">
	<img src="images/placeholder.jpg" alt="place holder">
		  <h2>Business cards</h2>
	</div>
	  
	  </div>
	  
	  
	 <!--container end--> 
	  <div class="footer">
  <p>&copy;Larry J designs </p>
</div>
	
	  <!--stickyfooter-->
	</div>
  </body>
</html>

标签： htmlcssresponsivecss-grid

解决方案

推荐阅读