On 21 Jul 2017, at 14:18, Tom Livingston wrote:
Is it possible to style the rows and columns of a css grid - the grid
itself?
There's no way to say something like '@column[2] {border: 1px
solid;}' and thus directly style the grid components. You have to
assign some sort of element into the grid, and style that.
I have an upcoming layout that uses what looks like a tic-tac-toe
board - complete with the vertical and horizontal lines of said
tic-tac-toe board - with text/icon in each grid cell.
You could certainly style the borders of the elements filling the
grid cells to create this effect. Alternatively, if you're going to be
assigning element to every grid cell but they can rearrange, you can use
what I call the "Attack of the Filler <b>s" approach. It would go
something like this:
<section id="ttt">
(...all your content here...)
<b id="col"></b>
<b id="row"></b>
</section>
Then assign styles something like this for the <b> elements:
b#col {grid-column: 2; grid-row: 1 / -1; border: 1px solid gray;
border-width: 0 1px;}
b#row {grid-column: 1 / -1; grid-row: 2; border: 1px solid gray;
border-width: 1px 0;}
That would get you the tic-tac-toe grid.
The drawback there is you could no longer rely on the grid's
automatic content flow to fill in the content, because the <b> elements
would be occupying cells. If you explicitly assign the various pieces
of content to their cells, then that's not a problem. If you want to do
this, but still want auto-flow into cells, you'd need to have the
content and tic-tac-tow grids in separate elements, and then position
one on top of the other. Note that I don't necessarily mean 'position',
though that could work. You could grid a container of the two grids so
as to put one grid on the other grid.. so, yes, you can have grids in
your grid to grid a grid over a grid.
I swear that made sense when I typed it.
--
Eric A. Meyer - http://meyerweb.com/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
