css 三列css网格布局没有媒体查询

Posted 2021-05-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 三列css网格布局没有媒体查询相关的知识，希望对你有一定的参考价值。

/* first create grid container class in html
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Grid Layout</title>
	  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href="css/page.css" rel="stylesheet">
    <link href="css/grid.css" rel="stylesheet">
  </head>
  <body>
    <div class="grid">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
  </body>
</html> */

/* ===================================== 
   Grid Layout
======================================== */
.grid {
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: 100px 200px;
    grid-gap: 15px;
}

/* ===================================== 
   Page Styles
======================================== */

* {
	box-sizing: border-box;
}
body {
	font-size: 1.4em;
	font-family: 'Varela Round', sans-serif;
  font-weight: bold;
	color: #6e859c;
  padding: 0;
  margin: 0;
	background: #e8e9e9;
}
.grid {
  background: #fff;
  border-radius: 0.285em;
  box-shadow: 0 0.1em 0 0 rgba(0,0,0,0.1);
	margin: 45px auto;
}
.item {
  color: #fff;
  text-shadow: 0 2px 0 rgba(110,133,156,0.18);
  padding: 0.85em;
  background: #6e859c;
  border: solid 1px rgba(110,133,156,0.15);
  border-radius: 0.3em;
}
.item:nth-child(even) {
  background: #a5cee9;
}

以上是关于css 三列css网格布局没有媒体查询的主要内容，如果未能解决你的问题，请参考以下文章

css 带有模板区域和媒体查询的CSS网格