CSS Grid Items

粉丝

4小时前4小时

行政经理

CSS Grid Items

A grid container contains one or more grid items.

All direct child elements of a grid container automatically become grid items.

Below is a grid container with five grid items:

Try it Yourself »

CSS Sizing/Spanning Grid Items

A grid item can span over mulitiple columns or rows.

We can specify where to start and end a grid item by using the following properties:

grid-column-start - Specifies on which column-line the grid item will start
grid-column-end - Specifies on which column-line the grid item will end
grid-column - Shorthand property for grid-column-start and grid-column-end
grid-row-start - Specifies on which row-line the grid item will start
grid-row-end - Specifies on which row-line the grid item will end
grid-row - Shorthand property for grid-row-start and grid-row-end

The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines.

We can refer to line numbers when placing a grid item in a grid container.

CSS grid-column-start and grid-column-end

The grid-column-start property specifies on which column-line the grid item will start.

The grid-column-end property specifies on which column-line the grid item will end.

Example

Let the first grid item start at column-line 1, and end on column-line 3:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

Result:

Try it Yourself »

The CSS grid-column Property

The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

Example

Let the first grid item start at column-line 1, and let it span 2 columns:

.item1 {
grid-column: 1 / span 2;
}

Result:

Try it Yourself »

CSS grid-row-start and grid-row-end

The grid-row-start property specifies on which row-line the grid item will start.

The grid-row-end property specifies on which row-line the grid item will end.

Example

Let the first grid item start at row-line 1, and end on row-line 3:

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}

Result:

Try it Yourself »

The CSS grid-row Property

The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

Example

Let the first grid item start at row-line 1, and let it span 2 rows:

.item1 {
grid-row: 1 / span 2;
}

Result:

Try it Yourself »

Combine grid-column and grid-row

Here we use both the grid-column and grid-row properties to let a grid item span both columns and rows.

Example

Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows:

.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}

Result:

Try it Yourself »

All CSS Grid Item Properties

Property	Description
align-self	Aligns the content for a specific grid item along the column axis
grid-area	A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties
grid-column	A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end	Specifies where to end the grid item
grid-column-start	Specifies where to start the grid item
grid-row	A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end	Specifies where to end the grid item
grid-row-start	Specifies where to start the grid item
justify-self	Aligns the content for a specific grid item along the row axis
place-self	A shorthand property for the align-self and the justify-self properties

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS Grid Items
CSS Grid Items

Cavalry发布主题在教程

CSS Grid Items CSS Grid Items A grid container contains one or more grid items. All direct child elements of a grid container automatically become grid items. Below is a grid container with five grid items: 1 2 3 4 5 Try it Yourself » CSS Sizing/Spanning Grid Items A grid item can span over mulitiple columns or rows. We can specify where to start and end a grid item by using the following properties: grid-column-start - Specifies on which column-line the grid item will start grid-column-end - Specifies on which column-line the grid item will end grid-column - Shorthand property for grid-column-start and grid-column-end grid-row-start - Specifies on which row-line the grid item will start grid-row-end - Specifies on which row-line the grid item will end grid-row - Shorthand property for grid-row-start and grid-row-end The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines. We can refer to line numbers when placing a grid item in a grid container. CSS grid-column-start and grid-column-end The grid-column-start property specifies on which column-line the grid item will start. The grid-column-end property specifies on which column-line the grid item will end. Example Let the first grid item start at column-line 1, and end on column-line 3: .item1 { grid-column-start: 1; grid-column-end: 3; } Result: 1 2 3 4 5 Try it Yourself » The CSS grid-column Property The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties. Example Let the first grid item start at column-line 1, and let it span 2 columns: .item1 { grid-column: 1 / span 2; } Result: 1 2 3 4 5 Try it Yourself » CSS grid-row-start and grid-row-end The grid-row-start property specifies on which row-line the grid item will start. The grid-row-end property specifies on which row-line the grid item will end. Example Let the first grid item start at row-line 1, and end on row-line 3: .item1 { grid-row-start: 1; grid-row-end: 3; } Result: 1 2 3 4 5 Try it Yourself » The CSS grid-row Property The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties. Example Let the first grid item start at row-line 1, and let it span 2 rows: .item1 { grid-row: 1 / span 2; } Result: 1 2 3 4 5 Try it Yourself » Combine grid-column and grid-row Here we use both the grid-column and grid-row properties to let a grid item span both columns and rows. Example Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows: .item1 { grid-column: 1 / span 2; grid-row: 1 / span 2; } Result: 1 2 3 4 5 6 Try it Yourself » All CSS Grid Item Properties Property Description align-self Aligns the content for a specific grid item along the column axis grid-area A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties ★ +1 Sign in to track progress
- 4小时前4小时
- 0篇回复
CSS Grid Container
CSS Grid Container

Cavalry发布主题在教程

CSS Grid Container CSS Grid Container A grid container contains one or more grid items arranged in columns and rows. All direct child elements of a grid container automatically become grid items. An element becomes a grid container when its display property is set to grid or inline-grid. 1 2 3 4 5 Try it Yourself » Display Grid Property The <div> element becomes a grid container when its display property is set to grid or inline-grid. Example Use display: grid to make a block-level grid container: .container { display: grid; } Result: 1 2 3 4 5 Try it Yourself » Example Use display: inline-grid to make an inline grid container: .container { display: inline-grid; } Result: 1 2 3 4 5 Try it Yourself » CSS Grid Container Properties Property Description align-content Vertically aligns the grid items inside the container align-items Specifies the default alignment for items inside a flexbox or grid container display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the grid items inside the container place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress
- 4小时前4小时
- 0篇回复
CSS Text Effects
CSS Text Effects

Cavalry发布主题在教程

CSS Text Effects CSS Text Effects CSS has some properties to handle text overflow, word wrapping, line breaking rules and writing modes. In this chapter you will learn about the following properties: text-overflow - Specifies how to handle overflowed content word-wrap - Allows long words to be able to be broken and wrap onto the next line word-break - Specifies line breaking rules writing-mode - Specifies whether lines of text are laid out horizontally or vertically CSS text-overflow Property The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or rendered with ellipsis (...). Both of the following properties are required for text-overflow to take effect: white-space: nowrap; overflow: hidden; Here, the overflowed content is clipped: This is some long text that will not fit in the box Here, the overflowed content is rendered with ellipsis (...): This is some long text that will not fit in the box The CSS code is as follows: Example p.test1 { width: 200px; border: 1px solid #000000; white-space: nowrap; overflow: hidden; text-overflow: clip; } p.test2 { width: 200px; border: 1px solid #000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Try it Yourself » The following example shows how you can display the overflowed content when hovering over the element: Example p:hover { overflow: visible; } Try it Yourself » CSS word-wrap Property The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line. If a word is too long to fit within an area, it expands outside: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word: This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. The CSS code is as follows: Example Allow long words to be able to be broken and wrap onto the next line: p { word-wrap: break-word; } Try it Yourself » CSS word-break Property The CSS word-break property specifies how words should break when reaching the end of a line. This property can take one of the following values: normal - This is default. Uses the default line breaking rules of the language break-all - Allows words to be broken at any character to prevent overflow keep-all - Prevents words from breaking Here, we use normal: This paragraph contains some text. This line will-break-at-hyphens. Here, we use break-all: This paragraph contains some text. The lines will break at any character. The CSS code is as follows: Example p.test1 { word-break: normal; } p.test2 { word-break: break-all; } Try it Yourself » CSS writing-mode Property The CSS writing-mode property specifies whether lines of text are laid out horizontally or vertically. This property can take one of the following values: horizontal-tb - Default. The text flows horizontally from left to right, vertically from top to bottom vertical-rl - The text flows vertically from top to bottom, horizontally from right to left vertical-lr - The text flows vertically from top to bottom, horizontally from left to right Here is a text with a span element with a vertical-rl writing-mode. The following example shows some different writing modes: Example p.test1 { writing-mode: horizontal-tb; } span { writing-mode: vertical-rl; } p.test2 { writing-mode: vertical-rl; } Try it Yourself » CSS Text Effect Properties The following table lists the CSS text effect properties: Property Description text-justify Specifies how justified text should be aligned and spaced text-overflow Specifies how overflowed content that is not displayed should be signaled to the user word-break Specifies line breaking rules for non-CJK scripts word-wrap Allows long words to be able to be broken and wrap onto the next line writing-mode Specifies whether lines of text are laid out horizontally or vertically ★ +1 Sign in to track progress
- 4小时前4小时
- 0篇回复

CSS Grid Items

推荐的帖子

CSS Grid Items

CSS Grid Items

CSS Sizing/Spanning Grid Items

CSS grid-column-start and grid-column-end

Example

The CSS grid-column Property

Example

CSS grid-row-start and grid-row-end

Example

The CSS grid-row Property

Example

Combine grid-column and grid-row

Example

All CSS Grid Item Properties

参与讨论

动态

CSS Grid Items

CSS Grid Container

CSS Text Effects

24 小时内在线的用户 0

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)