溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹css中怎么定義網格線大小，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
我們先來看一個小栗子。
<style>
article {
display: grid;
width: 300px;
height: 300px;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
}
div{
background: rgb(208, 159, 255);
background-clip: content-box;
border: solid 1px rgb(208, 159, 255);
padding: 10px;
}
</style>
</head>
<body>
<article>
<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>
</article>
</body>這個小例子的結果是
可以看到，我們通過改了屬性的值，將原本十分漂亮的布局變成了不是特別好看的一個布局。那我們改變了什么屬性呢？通過觀察可以看到，改變了grid-template-rows和grid-template-columns的屬性值。
那我們來看一下這兩個屬性吧。
grid-template-columns屬性是基于 網格列. 的維度，去定義網格線的名稱和網格軌道的尺寸大小。這些值是一個用空格分隔的列表，其中每個值指定相應列的尺寸。
語法格式是
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
這是這個屬性值的具體介紹。
none：這個關鍵字表示不明確的網格。所有的行和其大小都將由grid-auto-rows 屬性隱式的指定。
max-content：是一個用來表示以網格項的最大的內容來占據網格軌道的關鍵字。
min-content：是一個用來表示以網格項的最大的最小內容來占據網格軌道的關鍵字。
auto：如果該網格軌道為最大時，該屬性等同于 <max-content> ，為最小時，則等同于 <min-content> 。
grid-template-columns屬性看過了之后，我們去看另外一個屬性grid-template-rows。
grid-template-rows 規定網格布局中的行數（和高度）。值是用空格分隔的列表，其中每個值指定相應行的高度。
再來看看這個屬性的語法格式。
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
發現這個屬性的值和上一個屬性的值一模一樣，這樣我們就不用記那么多了。我們來看一下簡潔版本
關于css中怎么定義網格線大小就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
