CSS Grid Question

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

CSS Grid Question

Tom Livingston
List,

Is it possible to style the rows and columns of a css grid - the grid itself?

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.

Not experienced with Grid yet and can't find what I'm looking for in a search.

TIA

--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Grid Question

Karl DeSaulniers
Sure

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 21, 2017, at 1:18 PM, Tom Livingston <[hidden email]> wrote:
>
> List,
>
> Is it possible to style the rows and columns of a css grid - the grid itself?
>
> 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.
>
> Not experienced with Grid yet and can't find what I'm looking for in a search.
>
> TIA
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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/

______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Grid Question

Eric A. Meyer
In reply to this post by Tom Livingston
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Grid Question

Tom Livingston
Ow, my head.




On Fri, Jul 21, 2017 at 5:20 PM Eric A. Meyer <[hidden email]> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: CSS Grid Question

GJim
In reply to this post by Tom Livingston
Howdy Tom,

~~~
Friday, July 21, 2017, 12:18:41 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~



> List,

> Is it possible to style the rows and columns of a css grid - the grid itself?

> 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.

> Not experienced with Grid yet and can't find what I'm looking for in a search.

> TIA

This may not work as a solution for you, but your 'tic-tac-toe' reminds me of
what I did on the main page here:
www.rmaba.org

Six squares, all are .png images (in order to control font).

I'll probably be adding two more squares, near future, for additional features.

Hope this helps.

G-Jim c):{-

--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

______________________________________________________________________
css-discuss [[hidden email]]
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/
Loading...