Thuộc tính CSS vùng lưới xác định kích thước và vị trí của các mục trong các hàng trong vùng chứa lưới. Cũng xem các ví dụ và thử chúng.

Bạn đang xem : vùng lưới ô vuông css

Thuộc tính vùng lưới được sử dụng để chỉ định kích thước và vị trí của mục lưới trong hàng lưới. Nó là một thuộc tính viết tắt cho các thuộc tính sau:

  • lưới-hàng-bắt đầu , chỉ định hàng mà mục sẽ bắt đầu.
  • grid-column-start , chỉ định cột mà mục sẽ bắt đầu.
  • grid-row-end , chỉ định hàng mà mục sẽ kết thúc.
  • grid-column-end , chỉ định cột mà mục sẽ kết thúc.

Thuộc tính vùng lưới cũng chỉ định tên cho một mục lưới. Sau đó, các mục lưới đã đặt tên có thể được tham chiếu đến bởi thuộc tính grid-template-area của vùng chứa lưới.

Giá trị ban đầu
auto / auto / auto / auto

Áp dụng cho
Mục lưới.

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

Hoạt hình
Đúng. Grid-area có thể hoạt hình.

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

Cú pháp DOM
object.style.gridArea = “1/2 / span 2 / span 3”;

Cú pháp

  grid-area: grid-row-start / grid-column-start / grid-row- end / grid-column-end / itemname | ban đầu | inherit;  

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

grid-area

:

 

& 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: tiêu đề; }

. box2

{ vùng lưới: trái; }

. box3

{ lưới-khu vực: chính; }

. box4

{ vùng lưới: bên phải; }

. box5

{ grid-area: footer; }

. grid-container

{

display

: lưới; grid-template-domains:

'header header header header header header'

'left main main main right right'

'left footer footer footer footer footer'

; grid-gap:

5px

;

background-color

:

# 555

;

padding

:

10px

; }

. grid-container

& gt;

div

{

background-color

:

# ccc

;

text-align

: center;

padding

:

30px

0

;

font-size

:

30px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về thuộc tính vùng lưới

& lt; /

h2

& gt;

& lt;

p

& gt;

Bạn có thể sử dụng thuộc tính vùng lưới để đặt tên cho các mục lưới.

& lt; /

p

& gt;

& lt;

div

class

=

" grid-container "

& gt;

& lt;

div

class

=

" box1 "

& gt;

Tiêu đề

& lt; /

div

& gt;

& lt;

div

class

=

" box2 "

& gt;

Còn lại

& lt; /

div

& gt;

& lt;

div

class

=

" box3 "

& gt;

Chính

& lt; /

div

& gt;

& lt;

div

class

=

" box4 "

& gt;

Phải

& lt; /

div

& gt;

& lt;

div

class

=

" box5 "

& gt;

Chân trang

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Trong ví dụ sau, chúng tôi áp dụng giá trị “itemname” cho box1 chiếm vị trí của tất cả năm cột.

Ví dụ về

thuộc tính grid-area

với giá trị “itemname”:

 

& 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: itemname; }

. grid-container

{

display

: lưới; grid-template-area:

'itemname itemname itemname itemname itemname'

; grid-gap:

5px

;

background-color

:

# 8ebf42

;

padding

:

5px

; }

. grid-container

& gt;

div

{

background-color

:

# eee

;

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 vùng lưới

& lt; /

h2

& gt;

& lt;

div

class

=

" grid-container "

& gt;

& lt;

div

class

=

" box1 "

& gt;

1

& lt; /

div

& gt;

& lt;

div

& gt;

2

& lt; /

div

& gt;

& lt;

div

& gt;

3

& lt; /

div

& gt;

& lt;

div

& gt;

4

& lt; /

div

& gt;

& lt;

div

& gt;

5

& lt; /

div

& gt;

& lt;

div

& gt;

6

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Giá trị

Giá trị
Sự mô tả

lưới-hàng-bắt đầu
Chỉ định hàng sẽ được hiển thị.

lưới-cột-bắt đầu
Chỉ định mục sẽ được hiển thị trên cột nào.

lưới-hàng-kết thúc
Chỉ định mục hàng sẽ được dừng lại hoặc số hàng sẽ kéo dài.

lưới-cột-kết thúc
Chỉ định mục hàng sẽ được dừng lại trên cột nào hoặc số cột sẽ kéo dài.

Tên mục
Chỉ định tên cho mục.

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ủ đề khu vực lưới ô vuông css

css position property tutorial ( fixed, absolute, relative, static )

  • Tác giả: techsith
  • Ngày đăng: 2016-05-18
  • Đánh giá: 4 ⭐ ( 8384 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS ‘position’ property explained . Learn how each fixed, absolute, relative, static value works with simple examples.

    1. Static . 0:44 . (the default position, disturbing other elements)
    2. relative . 2:00 . (remains in original position, but can be moved around without disturbing other elements)
    3. Absolute . 7:35 . (remains in original position, but by default disturbs other elements – initially only)
    4. fixed . 13:40 . (remains in original position, but by default disturbs other elements – initially only – also stays fixed on screen when scrolling up/down)
    css position property
    *My Udemy Courses
    https://www.udemy.com/js-masterclass/
    https://www.udemy.com/course/react-hooks-course/

    Follow me for technology updates
    * https://facebook.com/techsith
    * https://www.facebook.com/groups/techsith
    * https://twitter.com/techsith1
    * https://www.linkedin.com/groups/13677140/
    * https://medium.com/@patelhemil

    Help me translate this video.
    * https://www.youtube.com/timedtext_cs_panel?c=UCbGZKLIHpox2l0whz6_RYyg&tab=2
    Note: use https://translate.google.com/ to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.

Lưới ô vuông 4 ly

  • Tác giả: luoiantoanxaydung.com
  • Đánh giá: 4 ⭐ ( 9502 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyên lưới ô vuông, lưới cước nông nghiệp, lưới xây dựng, lưới an toàn…. cung cấp giá tốt toàn quốc. 093 210 4939

Lưới cước ô vuông, lưới ô ly

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

Lưới inox lỗ vuông

  • Tác giả: dungluoi.com
  • Đánh giá: 5 ⭐ ( 8115 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lưới inox lỗ vuông hay còn được biết đến với nhiều tên gọi khác như lưới inox ô vuông, lưới inox mắt vuông, lưới thép inox ô lưới vuông… Đây là loại lưới phổ thông được sử dụng phổ biến trong nhiều

Lưới thép ô vuông

  • Tác giả: luoithepcongnghiep.vn
  • Đánh giá: 5 ⭐ ( 4122 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lưới thép ô vuông rất đa dạng với nhiều loại: lưới thép hàn tấm, lưới thép hàn cuộn, lưới thép hàn sơn tĩnh điện, lưới thép hàn bọc nhựa,…

Sử dụng CSS Grid để xây dựng web layout

  • Tác giả: fit.hufi.edu.vn
  • Đánh giá: 5 ⭐ ( 4856 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á: 5 ⭐ ( 3519 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…

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  Đầu vào của người dùng Python - lấy python đầu vào của người dùng

By ads_php