Ow, my head.
On Fri, Jul 21, 2017 at 5:20 PM Eric A. Meyer <e...@meyerweb.com> wrote:
> 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 [css-d@lists.css-discuss.org]
> 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/
--
Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
#663399
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
