Kevin Powell - Community•2y ago

Centering circle

Justify, align, place ... this is driving me crazy. So why isn't my .red-circle centering inside the .circle-box with place-self: center;, when .katana is doing it inside of .sword. It's even disappering which just throws me off completely! I just know there's some stupidly easy way of doing it, but I am missing it now ... main.css in css folder: https://github.com/AMarlonG/Japanese-style-responsiveness

GitHub

GitHub - AMarlonG/Japanese-style-responsiveness: Creating a traditi...

Creating a traditional japanese card with principals from Jen simmons and Utopia fluid responsive calculations - GitHub - AMarlonG/Japanese-style-responsiveness: Creating a traditional japanese car...

28 Replies

Å Marlon G•2y ago

I've made it work with some really hacky ways, like align-self: center; and then adding margin. But that doesn´t feel sustainable ...

Mannix•2y ago

you get a grid and you get a grid, everyone gets grid 🤣 don't you think you went a little overboard with the grid usage ?

Å Marlon G•2y ago

Haha! Maybe, but at least for this issue removing the grid on the parent doesn't let place work. So if I remove grid on .sword then the place-self on .katana doesn't work. I would love to make it work without! I just get so confused with the damn placement properties ... 😭

Mannix•2y ago

you don't need grid on circle-box and sword at all place-items: center on content-left should do all the job

MarkBoots•2y ago

you are missing a semi colon in calc.css on line 6 there for your circle does not get a size, the variable

Mannix•2y ago

also the words they just flex bro no need for grid you are also importing/adding the calc.css twice in html and css

MarkBoots•2y ago

with that semicolon it will work (did not change anything else)

Å Marlon G•2y ago

... it's to late here in Norway now. I think that is the answer. 😅

Mannix•2y ago

9pm ain't late 😉

Å Marlon G•2y ago

Ok, so it's all working now with all of your help. Thank you so much!

MarkBoots•2y ago

same time here in Netherlands,

Å Marlon G•2y ago

But a few questions ... I don't have to add the @import css in the css file, is that what you're saying?

Mannix•2y ago

no if you already loaded that file in html

MarkBoots•2y ago

~~not if you are already loading it in the html~~

Å Marlon G•2y ago

cool! And finally: using place only works when you use flex or grid, right? justify / align can be used outside, but also with, a flex or grid container?

Mannix•2y ago

place is grid only

Å Marlon G•2y ago

And to this point, what do you mean?

Mannix•2y ago

https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Chris House

CSS-Tricks

A Complete Guide to CSS Grid | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

Chris Coyier

CSS-Tricks

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

Mannix•2y ago

you want them side by side so there is no need for grid when you can use flex one less property to write

MarkBoots•2y ago

he means this, it's about the same

Å Marlon G•2y ago

Ah! I see!

MarkBoots•2y ago

you could also change this btw

.content-right {
  display: grid;
  /* grid-template: repeat(7, 1fr) / 1fr; */
  grid-auto-rows: 1fr
}

.content-right {
  display: grid;
  /* grid-template: repeat(7, 1fr) / 1fr; */
  grid-auto-rows: 1fr
}

Å Marlon G•2y ago

So I could really just write .bushido, .virtues {display:flex;} and then .bushido > *, .virtues > * {writing mode, text direction etc.}?

MarkBoots•2y ago

it depends a bit, with flex it will make the width of the columns based on the content, width grid-template-columns you can define them more to you liking. So it's preference, im not really against it tbh. I find grid easier to control

Å Marlon G•2y ago

Oh, that's really interesting! Because as you can see in my repo description my goal is to use fluid responsiveness (that's the main challenge here), so by using flex I can control the size of the children better? In other words control there fluidness better ... Well, yes, at least I find controlling grid more intuitive ...

MarkBoots•2y ago

other way around. grid sets the limits for the children. It defines the space where they can live in

Å Marlon G•2y ago

Hmm ... my brain is boiling now, but this is interesting. So I'm looking at how I could implement the Utopia space principles (https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12). If I calculate the fluid width of each grid cell then the children will move with it?

Utopia

Fluid Space Calculator

Fluid responsive design

Å Marlon G•2y ago

I don't have to worry about the childrens size at all? The ultimate fluidity in this project would be if you comment out everything inside content in the html, and then resize the screen. Thats the goal! Then you're left with a black card with perfect aspect ratio of 20/43, which is what the original printed card is.

Gaming

Programming

Centering circle