Thuộc tính grid-template-columns fit-content trong CSS

Thuộc tính grid-template-columns fit-content trong CSS

Thuộc tính grid-template-columns fit-content trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns fit-content trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px;}
.divcha div {background:green; color:#fff; text-align: center;
  padding: 20px 0;
  font-size: 15px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-template-columns fit-content trong CSS</h1>
<p>Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo fit-content thì kích thước chiều rộng sẽ giới hạn max theo giá trị trong đó, nếu nội dung các ô trong cột đó không full bằng giá trị đã cho thì chiều rộng cột sẽ thu nhỏ lại cho vừa đoạn chữ dài nhất:</p>
<div class="divcha" style="grid-template-columns: fit-content(150px) fit-content(100px);">
	<div>fit-content(150px) fit-content(100px); 1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<div class="divcha" style="grid-template-columns: fit-content(150px) fit-content(100px) auto;">
	<div>fit-content(150px) fit-content(100px) auto;</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<div class="divcha" style="grid-template-columns: fit-content(90%) auto auto;">
	<div>grid-template-columns: fit-content(90%) auto auto;</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>
Thuộc tính grid-template-columns fit-content trong CSS nằm trong bài viết Thuộc tính grid-template-columns trong CSS