Thanh bên lưới css

Các khu vực lưới mà bạn đã tạo trong vùng chứa lưới có thể thay đổi tùy chọn theo kích thước màn hình của người sử dụng

Dưới đây là hình ảnh ứng dụng trên màn hình điện thoại

Chúng ta sẽ cấu trúc lại mã theo hướng tiếp cận di động đầu tiên

Mobile first đơn giản là làm cho phong cách mặc định của bạn được dành cho các thiết bị di động. Sau đó, bạn sẽ tạo ra các thay đổi cho màn hình lớn hơn thông qua truy vấn phương tiện

Set a current code section in a media query. Như dưới đây

@media only screen and (min-width: 600px) {
    body {
        grid-template-columns: 50px 1fr;
        grid-template-areas: "sidebar  content"
                             "footer   footer";
         }
}

Bạn sẽ để đoạn mã mặc định bên ngoài truy vấn phương tiện

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

Tại sao chúng ta đặt

body {
   grid-template-areas: "content"
                        "footer" 

0 bên ngoài truy vấn phương tiện?

Bởi vì cả màn hình di động và máy tính để bàn chúng ta đều có 2 dòng

Tuy nhiên, trên màn hình máy tính để bàn. Thanh bên là 50px trong định nghĩa

body {
   grid-template-areas: "content"
                        "footer" 

1. Còn lại trên các thiết bị thanh bên di động không tồn tại

Vì thế, chúng ta sẽ định nghĩa lại tuyên bố

body {
   grid-template-areas: "content"
                        "footer" 

1 cho di động

Bây giờ với các thiết bị di động, chúng ta sẽ sử dụng kiểu này là mặc định

body {
   grid-template-areas: "content"
                        "footer" 

Menu đơn giản phải không?

Dòng chảy (hướng) của Grid

Đoạn mã cho di động như thế này

body {
   grid-template-areas: "content"
                        "footer"

Theo mặc định, một lưới sẽ sắp xếp các phần tử trên các dòng

Vì thế khai báo ở phía trên sẽ sắp xếp

body {
   grid-template-areas: "content"
                        "footer" 

3 trên một dòng và

body {
   grid-template-areas: "content"
                        "footer" 

4 trên một dòng khác

Dưới đây là kết quả - thanh bên sẽ ẩn trên màn hình di động

BƯỚC 2. https. // codepen. io/ohansemmanuel/pen/qjVvjJ?editors=1100

Add content into in Grid

Khi kết thúc phần này, chúng ta sẽ có một bố cục ứng dụng âm nhạc hoàn chỉnh. Bây giờ hãy tập trung và sắp xếp nội dung trong lưới

1. thanh bên

Thanh bên bao gồm 8 biểu tượng cách đều nhau dọc theo toàn bộ chiều dài của thanh bên

Vui lòng chèn các biểu tượng vào thanh bên

Kết quả sẽ như thế này.

https. // codepen. io/ohansemmanuel/bút/BZmbza

Các biểu tượng cũng sẽ ẩn trên màn hình di động. Và chỉ hiển thị trên các màn hình lớn hơn. This is direction next to mobile first

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

0

Sắp xếp các biểu tượng

Các thẻ

body {
   grid-template-areas: "content"
                        "footer" 

5 là các phần tử nội tuyến -- điều đó giải thích tại sao 2 biểu tượng lại hiển thị cạnh nhau trên một dòng

Please sort of them

Phần tử con của grid container cũng có thể trở thành grid container. Tại sao không?

Bước 1. Biến Sidebar thành Grid Container

Điều này sẽ cung cấp các tính năng căn bản của grid

Khi thanh bên chỉ hiển thị trên các màn hình lớn hơn, đừng quên đặt nó trong truy vấn phương tiện

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

2

Tôi thêm đường viền cho mỗi biểu tượng - để chúng ta dễ dàng phân biệt

Chuyện gì đang xảy ra ở đây?

Chúng ta KHÔNG thiết lập bất kỳ dòng hay cột nào trong thanh bên. Nhưng chúng ta thấy các biểu tượng được xếp hạng khá tốt. Lưới tự động thiết lập điều đó

Đây là vị trí mặc định của các mục trong một lưới -- trên cùng một dòng

Một lưới cũng có thể sắp xếp các phần tử sử dụng

body {
   grid-template-areas: "content"
                        "footer" 

6 hoặc

body {
   grid-template-areas: "content"
                        "footer" 

7

body {
   grid-template-areas: "content"
                        "footer" 

6 sẽ sắp xếp các phần tử theo chiều ngang

body {
   grid-template-areas: "content"
                        "footer" 

7 sắp xếp các phần tử theo chiều dọc

Áp dụng điều này cho thanh bên và chúng ta có một biểu tượng cục bộ bổ sung hoàn hảo

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

7

Bạn vẫn cảm thấy khó hiểu, hãy xem video dưới đây

Bây giờ chúng ta đã là một bố cục tổng thể hoàn hảo dành cho các biểu tượng trong thanh bên

https. // codepen. io/ohansemmanuel/pen/MorYJq?editors=1100

body {
   grid-template-areas: "content"
                        "footer" 

6 or

body {
   grid-template-areas: "content"
                        "footer" 

7 could have the values

• kéo dài
• bắt đầu
• kết thúc
• trung tâm

Nếu bạn đã từng làm việc với Flexbox, bạn sẽ quen với chúng

Chúng ta sẽ bổ sung nhiều nội dung hơn vào thiết kế hiện tại

Thêm 2 thẻ

body {
   grid-template-areas: "content"
                        "footer"

2 vào

body {
   grid-template-areas: "content"
                        "footer"

3

body {
   grid-template-areas: "content"
                        "footer" 

2

1. body {
      grid-template-areas: "content"
                           "footer"
   

   4 will like this.
   

2. body {
      grid-template-areas: "content"
                           "footer"
   

   5 will like this.
   

Trong phần này, chúng tôi sẽ tập trung vào

body {
   grid-template-areas: "content"
                        "footer"

4

Đầu tiên, thêm đoạn mã

body {
   grid-template-areas: "content"
                        "footer"

7 này

body {
   grid-template-areas: "content"
                        "footer" 

7

Chú thích cấu trúc của tài liệu

body {
   grid-template-areas: "content"
                        "footer"

4 có hai con trực tiếp. Một

body {
   grid-template-areas: "content"
                        "footer"

2 chứa một hình ảnh và một

0 chứa thông tin chi tiết của album

Kết quả của đoạn mã trên khá xấu xí

Hãy làm cho nó đẹp hơn

Cái chúng ta cần là một lưới với các phần tử được sắp xếp phù hợp

Hãy sử dụng các kiến ​​thức về diện tích lưới

Đầu tiên, định nghĩa grid area

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

0

body {
   grid-template-areas: "content"
                        "footer"

2 có chứa hình ảnh được đặt tên là

2. Phần chứa thông tin chi tiết của album được đặt tên là

3

Bây giờ, lưới định nghĩa

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

1

4 trở thành một thùng chứa lưới, có 2 phần tử xếp chồng lên nhau đầu tiên là

2 tiếp theo là

3. By because we are going to direction next next mobile first

In this point, does not have many change

Đây không phải là cái chúng ta muốn trên di động

Với màn hình di động, các phần tử phải được căn giữa

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

2

Kết quả sẽ như dưới đây

Tiếp theo hãy làm cho văn bản trong

7 căn giữa

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

3

Gần đúng với mục tiêu chỉ cần thêm một vài điều chỉnh

Đoạn text Unknown Artist và 2016. biểu đồ. 100 bài hát nên ẩn trên di động. Ảnh cũng nên nhỏ hơn

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

4

Lớp

8 sẽ ẩn trên di động. Chỉ cần thêm lớp tới phần tử mong muốn. Như thế này

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

5

And we have

Màn hình di động đã hoàn thành. Giờ hãy thêm kiểu cho những màn hình lớn hơn

Với màn hình lớn hơn, chúng ta cần một lưới 2 cột. Style will like this

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

6

Lưới đã được định nghĩa lại với 2 cột. Một số có độ rộng cố định là 250px và cột kia chiếm toàn bộ khoảng trống còn lại

https. // codepen. io/ohansemmanuel/pen/gReOQJ?editors=1100

Phần 4. Kết hợp Lưới CSS với Flexbox

Trong phần này, bạn sẽ học cách sử dụng Flexbox và Grid giống nhau

Hai mô-đun này đã thay đổi cách xử lý bố cục cục bộ trong CSS. Và cách hiệu quả nhất là sử dụng cả 2 mô-đun giống nhau

Please go to chi tiết

Với phần hiển thị thông tin chi tiết của album, chúng ta sẽ sử dụng flexbox

Làm sao để biết những chỗ nào sẽ sử dụng Flexbox?

Quy tắc chung là sử dụng Grid cho bố cục toàn bộ, còn Flexbox dành cho UI bên trong các phần tử con

Một phần tử con có thể là một hộp chứa linh hoạt. Một phần tử của bộ chứa flex cũng có thể là một bộ chứa lưới

Tôi giả sử rằng bạn đã biết về flexbox

Please edit

9 to

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

7

Đây là cái chúng ta có

body {
   grid-template-areas: "content"
                        "footer"

5 is a element of grid. Chúng ta có thể biến nó thành flex container nếu điều đó hữu ích

Trong trường hợp của chúng ta, mỗi thẻ

body {
   grid-template-areas: "content"
                        "footer"

2 là con trực tiếp của

body {
   grid-template-areas: "content"
                        "footer"

5 cần phải trở thành một hộp chứa linh hoạt. Chúng chứa tên bài hát, nghệ sĩ, thời gian và "catty cloud sync"

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

8

Bây giờ chia chiều rộng cho các phần tử con

body {
    display: grid;
    grid-template-rows: 1fr 100px;
}

9

https. // codepen. io/ohansemmanuel/đầy đủ/pwLEBL/

Bạn sẽ đồng ý với tôi rằng tại thời điểm này, các yếu tố cần thiết để bố cục đã hoàn thành

Tuy nhiên, tôi đã thực hiện một số thay đổi. Bạn có thể xem kết quả cuối cùng ở đây

Bạn sẽ thấy rằng tôi vẫn để trống footer. That is file for you. Lời khuyên của tôi là sử dụng flexbox. Nó sẽ giúp bạn hiểu cách cả hai mô-đun này làm việc cùng nhau

Với một vài thuộc tính của lưới, bạn đã xây dựng một tổ chức thực sự cục bộ. Ấn tượng. Bạn cũng học được kỹ năng vô giá khi kết hợp CSS Grid với Flexbox