グリッドレイアウト
7091 ワード
グリッドレイアウト
現在、グーグルブラウザと火狐ブラウザはグリッドレイアウトを十分にサポートしています.
メッシュレイアウトの定義
diplay: grid;
<meta charset="utf-8"/>
<style type="text/css">
.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(4, 100px);
}
.container div{
border: 1px solid lightgray;
}
</style>
<div class="container">
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
<div class="item4">item 4</div>
<div class="item5">item 5</div>
<div class="item6">item 6</div>
<div class="item7">item 7</div>
<div class="item8">item 8</div>
<div class="item9">item 9</div>
<div class="item10">item 10</div>
<div class="item11">item 11</div>
<div class="item12">item 12</div>
</div>
</code></pre>
<p><code>container</code> ， ， grid 。</p>
<h4 id="grid-template-rows">grid-template-rows</h4>
<p> ， 3 ， 200px，100px，200px;</p>
<h4 id="grid-template-columns">grid-template-columns</h4>
<p> </p>
<pre><code>grid-template-columns: repeat( , );</code></pre>
<pre><code>grid-template-columns: repeat(4, 100px);</code></pre>
<p> </p>
<pre><code>grid-template-columns: 100px 100px 100px 100px;</code></pre>
<p> ， </p>
<pre><code>.container div{
border: 1px solid lightgray;
}</code></pre>
<p> ， 。</p>
<h3 id=" "> </h3>
<ul>
<li><code>grid-row-start</code> </li>
<li><code>grid-row-end</code> </li>
<li><code>grid-column-start</code> </li>
<li><code>grid-column-end</code> </li>
</ul>
<p> </p>
<p> CSS </p>
<pre><code>.item1{
grid-row-start: 1; /* */
grid-row-end: 2; /* */
grid-column-start: 1; /* */
grid-column-end: 3; /* */
}</code></pre>
<p> ，<code>item1</code> ， 。</p>
<p> </p>
<pre><code>.item1{
grid-row: 1/2;
grid-column: 1/3;
}</code></pre>
<h3 id=" fr "> fr </h3>
<p> ， fr(fraction )， ，1 fr 1 ， 1 ， ， ， px 。</p>
<p> CSS ， </p>
<pre><code>.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(4, 1fr);
}</code></pre>
<h3 id="grid-gap">grid-gap</h3>
<p> ， </p>
<pre><code>.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}</code></pre>
<h3 id="grid-column-gap grid-row-gap">grid-column-gap grid-row-gap</h3>
<p> ， </p>
<h3 id=" "> </h3>
<p> 。</p>
<p> ， ， ， 6。</p>
<pre><code>
<title/>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: grid;
width: 100%;
min-height: 600px;
grid-gap: 1rem;
grid-template-columns:
[main-start] 1fr /* */
[main-end];
grid-template-rows:
[row1-start] 80px /* */
[row2-start] 1fr
[row3-start] 100px
[row3-end];
}
header{
grid-column: main-start/ main-end;
grid-row: row1-start/row2-start;
}
main{
grid-column: main-start/ main-end;
grid-row: row2-start/row3-start;
display: grid;
grid-gap: 1rem;
grid-template-columns:
[aside-start] 200px
[aside-end];
grid-template-rows:
[aside-row-start ] 1fr
[aside-row-end ];
;
}
aside{
grid-column: aside-start/ aside-end;
grid-row: aside-row-start/aside-row-end;
}
footer{
grid-column: main-start/ main-end;
grid-row: row3-start/row3-end;
}
.border{
border: 1px solid lightgray;
}
</style>
<header class="border"> </header>
<main class="border">
<aside class="border"> </aside>
</main>
<footer class="border"> </footer>
</code></pre>
<h3 id=" "> </h3>
<p> <code>grid-template-areas</code></p>
<p> </p>
<pre><code>
<title/>
<meta charset="utf-8"/>
<style type="text/css">
.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header{grid-area: header;}
.sidebar{grid-area: sidebar;}
.content{grid-area: content;}
.footer{grid-area: footer;}
.container div{
border: 1px solid lightgray;
}
</style>
<div class="container">
<div class="header"> </div>
<div class="sidebar"> </div>
<div class="footer"> </div>
<div class="content"> </div>
</div>
</code></pre>
<p> ， 。</p>
<p> 。</p>
</div>
</div>
</div>