Thuộc tính lưới-tự động hàng CSS – hàng tự động css lưới

Sử dụng thuộc tính CSS lưới-tự động hàng để đặt kích thước của các hàng. Tìm hiểu về các giá trị và thử các ví dụ.

Bạn đang xem : lưới css hàng tự động

Thuộc tính lưới tự động hàng chỉ định kích thước cho các hàng trong vùng chứa lưới . Nó chỉ ảnh hưởng đến các hàng không có kích thước được chỉ định.

Thuộc tính này có các giá trị sau: tự động, nội dung tối đa, nội dung tối thiểu, tối thiểu, độ dài và tỷ lệ phần trăm.

Giá trị ban đầu
Tự động

Áp dụng cho
Hộp chứa lưới.

Được kế thừa
Không.

Hoạt hình
Đúng. Kích thước của các hàng có thể thay đổi được.

Phiên bản
Mô-đun bố cục lưới CSS cấp độ 1

Cú pháp DOM
object.style.gridAutoRows = “40px”;

Cú pháp

  grid- 

auto

-rows: tự động | nội dung tối đa | nội dung tối thiểu | & lt; chiều dài & gt; | & lt; phần trăm & gt; | & lt; flex & gt; | ban đầu | kế thừa;

Ví dụ về thuộc tính lưới-tự động-hàng:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. box1

{ grid-area:

1

/

1

/

2 /

2

; }

. box2

{ grid-area:

1

/

2

/

2 /

3

; }

. box3

{ grid-area:

1

/

3

/

2 /

4

; }

. box4

{ grid-area:

2

/

1

/

3 /

2

; }

. box5

{ grid-area:

2

/

2

/

3 /

3

; }

. box6

{ grid-area:

2

/

3

/

3 /

4

; }

. auto-box1

{ grid-area:

1

/

1

/

2 /

2

; }

. auto-box2

{ grid-area:

1

/

2

/

2 /

3

; }

. auto-box3

{ grid-area:

1

/

3

/

2 /

4

; }

. auto-box4

{ grid-area:

2

/

1

/

3 /

2

; }

. auto-box5

{ grid-area:

2

/

2

/

3 /

3

; }

. auto-box6

{ grid-area:

2

/

3

/

3 /

4

; }

. grid-container

{

display

: lưới; grid-

auto

-rows:

100px

; grid-gap:

10px

;

background-color

:

# ccc

;

padding

:

10px

; }

. grid-container

& gt;

div

{

background-color

:

# 666

;

text-align

: center;

padding

:

20px

0

;

font-size

:

20px

; }

. auto-container

{

display

: lưới; grid-

auto

-rows: auto; grid-gap:

10px

;

background-color

:

# ccc

;

padding

:

10px

; }

. auto-container

& gt;

div

{

background-color

:

# 666

;

text-align

: center;

padding

:

20px

0

;

font-size

:

20px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính Grid-auto-rows

& lt; /

h2

& gt;

& lt;

h3

& gt;

100 pixel

& lt; /

h3

& gt;

& lt;

div

class

=

" grid-container "

& gt;

& lt;

div

class

=

" box1 "

& gt;

1

& lt; /

div

& gt;

& lt;

div

class

=

" box2 "

& gt;

2

& lt; /

div

& gt;

& lt;

div

class

=

" box3 "

& gt;

3

& lt; /

div

& gt;

& lt;

div

class

=

" box4 "

& gt;

4

& lt; /

div

& gt;

& lt;

div

class

=

" box5 "

& gt;

5

& lt; /

div

& gt;

& lt;

div

class

=

" box6 "

& gt;

6

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

h3

& gt;

auto

& lt; /

h3

& gt;

& lt;

div

class

=

" auto-container "

& gt;

& lt;

div

class

=

" auto-box1 "

& gt;

1

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box2 "

& gt;

2

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box3 "

& gt;

3

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box4 "

& gt;

4

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box5 "

& gt;

5

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box6 "

& gt;

6

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Ví dụ về Thuộc tính

grid-auto-lines

với một số giá trị:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. box1

{ grid-area:

1

/

1

/

2 /

2

; }

. box2

{ grid-area:

1

/

2

/

2 /

3

; }

. box3

{ grid-area:

1

/

3

/

2 /

4

; }

. box4

{ grid-area:

2

/

1

/

3 /

2

; }

. box5

{ grid-area:

2

/

2

/

3 /

3

; }

. box6

{ grid-area:

2

/

3

/

3 /

4

; }

. gray-box1

{ grid-area:

1

/

1

/

2 /

2

; }

. gray-box2

{ grid-area:

1

/

2

/

2 /

3

; }

. gray-box3

{ grid-area:

1

/

3

/

2 /

4

; }

. gray-box4

{ grid-area:

2

/

1

/

3 /

2

; }

. gray-box5

{ grid-area:

2

/

2

/

3 /

3

; }

. gray-box6

{ grid-area:

2

/

3

/

3 /

4

; }

. auto-box1

{ grid-area:

1

/

1

/

2 /

2

; }

. auto-box2

{ grid-area:

1

/

2

/

2 /

3

; }

. auto-box3

{ grid-area:

1

/

3

/

2 /

4

; }

. auto-box4

{ grid-area:

2

/

1

/

3 /

2

; }

. auto-box5

{ grid-area:

2

/

2

/

3 /

3

; }

. auto-box6

{ grid-area:

2

/

3

/

3 /

4

; }

. min-box1

{ grid-area:

1

/

1

/

2 /

2

; }

. min-box2

{ grid-area:

1

/

2

/

2 /

3

; }

. min-box3

{ grid-area:

1

/

3

/

2 /

4

; }

. min-box4

{ grid-area:

2

/

1

/

3 /

2

; }

. min-box5

{ grid-area:

2

/

2

/

3 /

3

; }

. min-box6

{ grid-area:

2

/

3

/

3 /

4

; }

. max-box1

{ grid-area:

1

/

1

/

2 /

2

; }

. max-box2

{ grid-area:

1

/

2

/

2 /

3

; }

. max-box3

{ grid-area:

1

/

3

/

2 /

4

; }

. max-box4

{ grid-area:

2

/

1

/

3 /

2

; }

. max-box5

{ grid-area:

2

/

2

/

3 /

3

; }

. max-box6

{ grid-area:

2

/

3

/

3 /

4

; }

. grid-container

{

display

: lưới; grid-

auto

-rows:

150px

; grid-gap:

10px

;

background-color

:

# ccc

;

padding

:

10px

; }

. grid-container

& gt;

div

{

background-color

:

# 888

;

text-align

: center;

padding

:

20px

0

;

font-size

:

30px

; }

. gray-container

{

display

: lưới; grid-

auto

-rows:

30%

; grid-gap:

10px

;

background-color

:

# ccc

;

padding

:

10px

; }

. gray-container

& gt;

div

{

background-color

:

# 888

;

text-align

: center;

padding

:

20px

0

;

font-size

:

30px

; }

. auto-container

{

display

: lưới; grid-

auto

-rows: auto; grid-gap:

10px

;

background-color

:

# ccc

;

padding

:

10px

; }

. auto-container

& gt;

div

{

background-color

:

# 888

;

text-align

: center;

padding

:

20px

0

;

font-size

:

30px

; }

. min-container

{

display

: lưới; grid-

auto

-rows: min-content; grid-gap:

10px

;

background-color

:

# 000

;

padding

:

10px

; }

. min-container

& gt;

div

{

background-color

:

# ccc

;

text-align

: center;

padding

:

20px

0

;

font-size

:

30px

; }

. max-container

{

display

: lưới; grid-

auto

-rows: max-content; grid-gap:

10px

;

background-color

:

# 000

;

padding

:

10px

; }

. max-container

& gt;

div

{

background-color

:

# ccc

;

text-align

: center;

padding

:

20px

0

;

font-size

:

30px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính Grid-auto-rows

& lt; /

h2

& gt;

& lt;

p

& gt;

Sử dụng

& lt;

strong

& gt;

grid-auto-row

& lt; /

strong & gt;

thuộc tính để đặt kích thước (chiều cao) mặc định cho tất cả các hàng.

& lt; /

p

& gt;

& lt;

h3

& gt;

150 pixel

& lt; /

h3

& gt;

& lt;

div

class

=

" grid-container "

& gt;

& lt;

div

class

=

" box1 "

& gt;

1

& lt; /

div

& gt;

& lt;

div

class

=

" box2 "

& gt;

2

& lt; /

div

& gt;

& lt;

div

class

=

" box3 "

& gt;

3

& lt; /

div

& gt;

& lt;

div

class

=

" box4 "

& gt;

4

& lt; /

div

& gt;

& lt;

div

class

=

" box5 "

& gt;

5

& lt; /

div

& gt;

& lt;

div

class

=

" box6 "

& gt;

6

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

h3

& gt;

30%

& lt; /

h3

& gt;

& lt;

div

class

=

" gray-container "

& gt;

& lt;

div

class

=

" gray-box1 "

& gt;

1

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" gray-box2 "

& gt;

2

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" gray-box3 "

& gt;

3

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" gray-box4 "

& gt;

4

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" gray-box5 "

& gt;

5

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" gray-box6 "

& gt;

6

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

h3

& gt;

auto

& lt; /

h3

& gt;

& lt;

div

class

=

" auto-container "

& gt;

& lt;

div

class

=

" auto-box1 "

& gt;

1

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box2 "

& gt;

2

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box3 "

& gt;

3

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box4 "

& gt;

4

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box5 "

& gt;

5

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" auto-box6 "

& gt;

6

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

h3

& gt;

min-content

& lt; / < p class = "hljs-name"> h3

& gt;

& lt;

div

class

=

" min-container "

& gt;

& lt;

div

class

=

" min-box1 "

& gt;

1

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" min-box2 "

& gt;

2

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" min-box3 "

& gt;

3

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" min-box4 "

& gt;

4

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" min-box5 "

& gt;

5

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" min-box6 "

& gt;

6

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt;

h3

& gt;

max-content

& lt; / < p class = "hljs-name"> h3

& gt;

& lt;

div

class

=

" max-container "

& gt;

& lt;

div

class

=

" max-box1 "

& gt;

1

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" max-box2 "

& gt;

2

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" max-box3 "

& gt;

3

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" max-box4 "

& gt;

4

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" max-box5 "

& gt;

5

& lt; /

div

& gt; < / p>

& lt;

div

class

=

" max-box6 "

& gt;

6

& lt; /

div

& gt; < / p>

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Ví dụ về

lưới-tự động-hàng

với giá trị “minmax”:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

. box1

{ grid-area:

1

/

1

/

2 /

2

; }

. box2

{ grid-area:

1

/

2

/

2 /

3

; }

. box3

{ grid-area:

1

/

3

/

2 /

4

; }

. box4

{ grid-area:

2

/

1

/

3 /

2

; }

. box5

{ grid-area:

2

/

2

/

3 /

3

; }

. box6

{ grid-area:

2

/

3

/

3 /

4

; }

. minmax1

{ grid-area:

1

/

1

/

2 /

2

; }

. minmax2

{ grid-area:

1

/

2

/

2 /

3

; }

. minmax3

{ grid-area:

1

/

3

/

2 /

4

; }

. minmax4

{ grid-area:

2

/

1

/

3 /

2

; }

. minmax5

{ grid-area:

2

/

2

/

3 /

3

; }

. minmax6

{ grid-area:

2

/

3

/

3 /

4

; }

. grid-container

{

display

: lưới; grid-

auto

-rows:

100px

; grid-gap:

10px

;

background-color

:

# ccc

;

padding

:

10px

; }

. grid-container

& gt;

div

{

background-color

:

# 666

;

text-align

: center;

padding

:

20px

0

;

font-size

:

20px

; }

. minmax-container

{

display

: lưới; grid-

auto

-rows:

minmax

(

90px ,

4cm

); grid-gap:

10px

;

background-color

:

# cccccc

;

padding

:

10px

; }

. minmax-container

& gt;

div

{

background-color

:

# f5f5f5

;

text-align

: center;

padding

:

20px

0

;

font-size

:

20px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính Grid-auto-rows

& lt; /

h2

& gt;

& lt;

h3

& gt;

100 pixel

& lt; /

h3

& gt;

& lt;

div

class

=

" grid-container "

& gt;

& lt;

div

class

=

" box1 "

& gt;

1

& lt; /

div

& gt;

& lt;

div

class

=

" box2 "

& gt;

2

& lt; /

div

& gt;

& lt;

div

class

=

" box3 "

& gt;

3

& lt; /

div

& gt;

& lt;

div

class

=

" box4 "

& gt;

4

& lt; /

div

& gt;

& lt;

div

class

=

" box5 "

& gt;

5

& lt; /

div

& gt;

& lt;

div

class

=

" box6 "

& gt;

6

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

h3

& gt;

minmax

& lt; /

h3

& gt;

& lt;

div

class

=

" minmax-container "

& gt;

& lt;

div

class

=

" minmax1 "

& gt;

1

& lt; /

div

& gt;

& lt;

div

class

=

" minmax2 "

& gt;

2

& lt; /

div

& gt;

& lt;

div

class

=

" minmax3 "

& gt;

3

& lt; /

div

& gt;

& lt;

div

class

=

" aminmax4 "

& gt;

4

& lt; /

div

& gt;

& lt;

div

class

=

" minmax5 "

& gt;

5

& lt; /

div

& gt;

& lt;

div

class

=

" minmax6 "

& gt;

6

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Tại đây, các hàng tự động theo lưới được sử dụng để đặt kích thước (chiều cao) mặc định cho tất cả các hàng.

Giá trị

Giá trị
Sự mô tả
Chơi nó

Tự động
Kích thước của các hàng chiếm kích thước của vùng chứa. Đây là giá trị mặc định của thuộc tính.

Chơi »

nội dung tối đa
Kích thước của mỗi hàng phụ thuộc vào mục lớn nhất trong các hàng.

Chơi »

nội dung tối thiểu
Kích thước của mỗi hàng phụ thuộc vào mục nhỏ nhất trong các hàng.

Chơi »

minmax (min.max)
Phạm vi kích thước lớn hơn hoặc bằng “min” và nhỏ hơn hoặc bằng “max”.

Chơi »

& lt; chiều dài & gt;
Kích thước của các hàng được chỉ định bởi giá trị độ dài.

Chơi »

& lt; phần trăm & gt;
Kích thước của các hàng được xác định bằng tỷ lệ phần trăm.

Chơi »

& lt; flex & gt;
Thứ nguyên không âm với đơn vị “fr” chỉ định hệ số linh hoạt của bản nhạc. Mỗi bản nhạc & lt; flex & gt; -size chia sẻ không gian còn lại tương ứng với hệ số linh hoạt của nó.

ban đầu
Làm cho thuộc tính sử dụng giá trị mặc định của nó.

thừa kế
Kế thừa tài sản từ yếu tố cha mẹ của nó.


Xem thêm những thông tin liên quan đến chủ đề hàng tự động css lưới

Lô 52 | cò mổ tự động, quẹt nhôm mỹ, camel, nhôm khối, asr, xăng lỏng

  • Tác giả: Bật Lửa Cổ Xưa Độc Lạ
  • Ngày đăng: 2022-07-08
  • Đánh giá: 4 ⭐ ( 6199 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: bật_lửa quái xưa cối zippo ve_chai quẹt
    – Chia lửa cho anh em đam mê sưu tầm các dòng bật lửa xưa, quái, độc lạ
    – Lô 52 | cò mổ tự động, quẹt nhôm mỹ, camel, nhôm khối, asr, xăng lỏng
    – Anh em sưu tầm Liên hệ Minh: 0779.709.905 ( nghe máy số này )
    – Zalo: 0906.324.776 (chỉ sử dụng 1 zalo duy nhất này)
    – Cảm ơn anh em đã ủng hộ

Tìm hiểu về “Thuật toán tự động sắp xếp” của CSS Grid (hệ thống lưới)

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 4 ⭐ ( 6370 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn trước về CSS Grid, chúng ta đã tìm hiểu về các cột có kích thước động và các gutter (khoảng không gian giữa các cột) tốt hơn. Chúng ta đã biết rằng không cần thiết phải thiết…

Di chuyển các mục trong Bố cục lưới CSS [Hướng dẫn] / Mã hóa

  • Tác giả: vi.phhsnews.com
  • Đánh giá: 5 ⭐ ( 4718 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Mô-đun bố cục lưới CSS trong thiết kế web sẽ ngày càng khả thi hơn khi nhiều trình duyệt bắt đầu hỗ trợ nó. Trong khi tạo bố cục điền vào lưới

Lưới CSS với tự động điền và kích thước tự động

  • Tác giả: isolution.pro
  • Đánh giá: 5 ⭐ ( 5212 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Giải pháp lưới CSS cho các vấn đề của Float và Flexbox

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 1232 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trước khi giải thích CSS Grid là gì và nó dùng để làm gì, tôi sẽ giải thích trạng thái hiện tại của các công cụ chúng ta có khi phát triển bố cục cho trang web của mình. Giả sử chúng ta muốn…

Bố cục lưới CSS: Giới thiệu

  • Tác giả: galaxyz.net
  • Đánh giá: 3 ⭐ ( 6633 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách tạo bố cục lưới cho mô-đun Divi bằng CSS

  • Tác giả: codewatchers.com
  • Đánh giá: 5 ⭐ ( 1347 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có quen với việc tạo các trang web tuyệt đẹp bằng Divi không? Bạn có thể nên biết rằng bố cục lưới là một tính năng cốt lõi của Divi Builder. Thông thường, bạn bắt đầu bằng cách tạo một hàng và…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Liên kết các trang trong HTML - liên kết html trong trang