Hướng dẫn grid trong css w3schools
CSS Grid Layout Module Show HeaderMenuMainRightFooterTry it Yourself » The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Browser SupportThe grid properties are supported in all modern browsers. Grid ElementsA grid layout consists of a parent element, with one or more child elements. Example1 2 3 4 5 6 7 8 9 Try it Yourself » Display PropertyAn HTML element becomes a grid container when its All direct children of the grid container automatically become grid items. Grid ColumnsThe vertical lines of grid items are called columns. Grid RowsThe horizontal lines of grid items are called rows. Grid GapsThe spaces between each column/row are called gaps. You can adjust the gap size by using one of the following properties:
ExampleThe .grid-container { Try it Yourself » ExampleThe .grid-container { Try it Yourself » ExampleThe .grid-container { Try it Yourself » ExampleThe .grid-container { Try it Yourself » Grid LinesThe lines between columns are called column lines. The lines between rows are called row lines. Refer to line numbers when placing a grid item in a grid container: ExamplePlace a grid item at column line 1, and let it end on column line 3: .item1 { Try it Yourself » ExamplePlace a grid item at row line 1, and let it end on row line 3: .item1 { Try it Yourself » All CSS Grid Properties
|