date:20170721

Re: [css-d] CSS Grid Question

2017-07-21 Thread GJim

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 [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/

Re: [css-d] CSS Grid Question

2017-07-21 Thread Tom Livingston

Ow, my head.




On Fri, Jul 21, 2017 at 5:20 PM Eric A. Meyer  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 s" approach.  It would go
> something like this:
>
> 
> (...all your content here...)
> 
> 
> 
>
> Then assign styles something like this for the  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  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/

Re: [css-d] CSS Grid Question

2017-07-21 Thread Eric A. Meyer


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 s" approach.  It would go 
something like this:



   (...all your content here...)
   
   


Then assign styles something like this for the  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  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/

Re: [css-d] CSS Grid Question

2017-07-21 Thread Karl DeSaulniers

Sure

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 21, 2017, at 1:18 PM, Tom Livingston  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 [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/

__
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/

Re: [css-d] Recommendation

2017-07-21 Thread Larry Martell

On Fri, Jul 21, 2017 at 3:16 PM, Sansan Ngo  wrote:
> Hello,
>
> I am new to learning CSS and was wondering if there were any free webhosting
> sites that you can recommend to run my CSS coding on?
>
> Many thanks in advance for your help

jsfiddle.net and codepen.io are ones I use
__
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/

[css-d] Recommendation

2017-07-21 Thread Sansan Ngo


Hello, 

I am new to learning CSS and was wondering if there were any free webhosting 
sites that you can recommend to run my CSS coding on?

Many thanks in advance for your help

Kind regards,
Sansan 
__
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/

[css-d] CSS Grid Question

2017-07-21 Thread 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 [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/

Re: [css-d] CSS Grid Question

Re: [css-d] CSS Grid Question

Re: [css-d] CSS Grid Question

Re: [css-d] CSS Grid Question

Re: [css-d] Recommendation

[css-d] Recommendation

[css-d] CSS Grid Question

7 matches

Site Navigation

Mail list logo

Footer information