CSS Grid-column-start Property - Dofactory

Có thể bạn quan tâm

CSS grid-column-start CSS grid-column-gap CSS grid-gap

The grid-column-start sets the start column of a grid item.

Its value can also be a range of columns with span n.

Columns with insufficient or no items will be left blank or empty.

Example

#

Item 2 has a grid-column-start value of 3. This item starts displaying in the third column, leaving the preceding column blank.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <style> .grid-container { background-color: steelblue; padding: 10px; display: grid; grid-gap: 10px; grid-template-columns: auto auto auto auto auto; } .grid-container > div { background-color: aliceblue; text-align: center; padding: 15px 5px; font-size: 18px; } </style> <div class="grid-container"> <div>1</div> <div style="grid-column-start: 3; background-color: salmon; color: white;">2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> </div> Try it live grid-column-gap grid-gap

Syntax

#

grid-column-start: auto | column | span n;

Values

#

Value	Description
auto	Default. Item follows regular grid flow.
column	Sets the column at which to start the display of the item.
span n	Sets the number of columns the item will span. n = integer.

More Examples

#

Click the buttons to see different grid-column-start values.

auto span 3 column 4

1 2 3 4 5 6 7 8 9 10 11 <style> .grid-contain { background-color: steelblue; padding: 10px; display: grid; grid-gap: 10px; grid-template-columns: auto auto auto auto; } .grid-contain > div { background-color: aliceblue; padding: 10px 5px; text-align: center; font-size: 18px; } .grid-column-start-example { color: white; background-color: salmon !important; grid-column-start: span 3; } </style> <div class="grid-contain"> <div>1</div> <div class="grid-column-start-example">2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div> Try it live

Browser support

#

This table shows when grid-column-start support started for each browser.