This commit is contained in:
@ -46,33 +46,45 @@ export default Vue.extend({
|
||||
display grid
|
||||
grid-gap 4px
|
||||
|
||||
> *
|
||||
overflow hidden
|
||||
border-radius 4px
|
||||
|
||||
&[data-count="1"]
|
||||
grid-template-rows 1fr
|
||||
|
||||
&[data-count="2"]
|
||||
grid-template-columns 1fr 1fr
|
||||
grid-template-rows 1fr
|
||||
|
||||
&[data-count="3"]
|
||||
grid-template-columns 1fr 0.5fr
|
||||
grid-template-rows 1fr 1fr
|
||||
:nth-child(1)
|
||||
|
||||
> *:nth-child(1)
|
||||
grid-row 1 / 3
|
||||
:nth-child(3)
|
||||
|
||||
> *:nth-child(3)
|
||||
grid-column 2 / 3
|
||||
grid-row 2 / 3
|
||||
|
||||
&[data-count="4"]
|
||||
grid-template-columns 1fr 1fr
|
||||
grid-template-rows 1fr 1fr
|
||||
|
||||
:nth-child(1)
|
||||
> *:nth-child(1)
|
||||
grid-column 1 / 2
|
||||
grid-row 1 / 2
|
||||
:nth-child(2)
|
||||
|
||||
> *:nth-child(2)
|
||||
grid-column 2 / 3
|
||||
grid-row 1 / 2
|
||||
:nth-child(3)
|
||||
|
||||
> *:nth-child(3)
|
||||
grid-column 1 / 2
|
||||
grid-row 2 / 3
|
||||
:nth-child(4)
|
||||
|
||||
> *:nth-child(4)
|
||||
grid-column 2 / 3
|
||||
grid-row 2 / 3
|
||||
|
||||
|
Reference in New Issue
Block a user