Layout (grid , Box) Flashcards

1
Q

Css positioning properties
1. Elements flow normally
2. Posi. Rela to its nearest position
3. Posi relative to NORMAL POSITION

  1. Toggles relative n fixed depending on SCROLL
A
  1. Static
  2. Absolute
  3. Relative
  4. Absolute
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Align-items has 5

A
  1. Stretch
    1.2. Fles start
    13 flex end
    1.4. Flex center
    1.5flex baseline
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

An HTML element becomes a grid container when its display property is set to —- or —-

  1. The vertical lines of grid items are called??. N horizontal are ??
  2. This property defines the number of columns in your grid layout, and it can define the width of each column
  3. property defines the height of each row.
A
  1. Grid / inline grid
  2. columns & rows
  3. Grid-template-columns
    4, grud template rows
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q
  1. Which model includes margin, border, padding, and content

A CSS Box model
B. CSS3 Flexbox Box model
C. CSS3 Grid Layout model

  1. Which model defines structures similar to tables using 2 dimensions?
    A. CSS Box model
    B CSS3 Flexbox Box model
    C. CSS3 Grid Layout model
  2. You are creating a grid layout. What does 1fr mean in the following code?
    grid-template-columns: 150px 150px 1fr 1fr;
A
  1. Css box model
  2. Css3 grid layout model
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Grid area:1? /?2 /?3 /?4

A

1= row start
2 column start
3 grud end row
5 grud end. column

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q
  1. You can use the ?? property to name grid item
A
  1. grid-area or ref fered as grid template areas when setting up

To name ex:
.grid{
Grid template areas : ‘ mm’ ‘11’;)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q
  1. What does the fr measurement unit do?

A. It takes as much space as possible

B. It makes the grid contract
C. It expands the lines of the cel

2 What is the syntax for the repeat() function?

A. repeat(size, times)
B. repeat(times, size)
C. repeat(size)(times)

  1. How can I make a column respect a maximum or a minimum size?
  2. Using maxSize() function
    B. Using minmax() function
    C. Using min-max property
A
  1. A
  2. B
  3. B min max FUNCTION
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q
  1. How can I align the content INSIDE of the grid cells?
    A. Using place-items
    B. Using place-content
  2. How can I align the grid cells?

A. Using place-items
B. Using place-content

A

1.a. Place items
2. Place content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q
  1. Which class provides a responsive fixed width container?
    AContainer fluid
    B. Container-fixed
    C. Container
  2. Which class provides a full width container, spanning the entire width of the viewport?
    AContainer fluid
    B. Container-fixed
    C. Container
  3. Which class adds zebra-stripes to a table?
    A. Tablebordered
    B. Even n odd
    C.table%zebra
    D. Table striped
A
  1. Responsive = Container
  2. Con fluid
  3. D. Table striped
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q
  1. Which class is used to create a big box for calling extra attention
    - jumbotron
    - bigbox
  2. Which class is used to create a button group?
    A. Button-group
    B. Group btx
    C btn-group
A
  1. Jumbotron
  2. Btn-group
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

1 How can you insert a search icon

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly