Install Web App

BRIEF

MINA

Tailwind

Belajar Tailwind CSS #69 Tailwind CSS place-items

profil-penulis

Ahmad Dika Zulfahmi

24 April 2025

Apa itu place-items?

place-items adalah utilitas di Tailwind CSS yang mengatur posisi item dalam grid secara horizontal (justify-items) dan vertikal (align-items) sekaligus, dalam satu class.

Cocok digunakan saat kamu ingin merapikan item dalam grid tanpa perlu menulis dua class terpisah (justify-items dan align-items).

Daftar Kelas dan Artinya:

Class

Artinya

place-items-start

Menempatkan semua item di awal (atas & kiri) grid area

place-items-end

Menempatkan semua item di akhir (bawah & kanan) grid area

place-items-end-safe

Sama seperti end, tapi aman dari overflow

place-items-center

Menempatkan item di tengah-tengah area grid

place-items-center-safe

Sama seperti center, tapi aman dari overflow

place-items-baseline

Menyesuaikan item berdasarkan garis dasar teks

place-items-stretch

Membuat item meluas sesuai ukuran area grid-nya

Contoh Penggunaan:

1. place-items-start

Menempatkan semua item ke bagian kiri atas grid:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body>

    <div class="grid grid-cols-3 place-items-start gap-4 bg-green-100">
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </div>

</body>

</html>

berikut hasilnya:

2. place-items-end

Semua item akan ditempatkan di kanan bawah area grid:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body>

    <div class="grid h-56 grid-cols-3 place-items-end gap-4 bg-green-100">
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </div>

</body>

</html>

berikut hasilnya:

3. place-items-center

Item ditaruh di tengah baik secara horizontal maupun vertikal:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body>

    <div class="grid h-56 grid-cols-3 place-items-center gap-4 bg-yellow-100">
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </div>

</body>

</html>

berikut hasilnya:

 

4. place-items-stretch

Item akan otomatis meluas (stretch) untuk mengisi area grid:

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="app.css">
</head>

<body>

    <div class="grid h-56 grid-cols-3 place-items-stretch gap-4 bg-blue-100">
        <div>01</div>
        <div>02</div>
        <div>03</div>
        <div>04</div>
        <div>05</div>
        <div>06</div>
    </div>

</body>

</html>

berikut hasilnya:

Responsive

Kamu bisa kombinasikan dengan breakpoint seperti ini:

<div class="grid place-items-start md:place-items-center">
  <!-- Isi grid -->
</div>

Artinya:

  • Di layar kecil: item ditaruh di start

  • Di layar medium ke atas (md:): item pindah ke center

Artikel Lainnya Dengan Kategori Terkait :

1. Belajar Tailwind CSS #01 Instalasi Tailwind CSS

2. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS

3. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS

4. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4

5. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3

6. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1

7. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2

8. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1

9. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2

10. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3

11. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4

12. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5

13. Belajar Tailwind CSS #13 Responsive design part 1

14. Belajar Tailwind CSS #14 Responsive design part 2

15. Belajar tailwind CSS #15 Responsive design part 3

16. Belajar Tailwind CSS #16 Dark Mode di Tailwind

17. Belajar Tailwind CSS #17 Theme Variables part 1

18. Belajar Tailwind CSS #18 Theme Variables part 2

19. Belajar Tailwind CSS #19 Theme Variables part 3

20. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1

21. Belajar Tailwind CSS #21 Tailwind - Colors part 2

22. Belajar Tailwind CSS #22 Adding custom styles part 1

23. Belajar Tailwind CSS #23 Adding custom styles part 2

24. Belajar Tailwind CSS #24 Adding custom styles part 3

25. Belajar Tailwind CSS #25 Detecting classes in soure files

26. Belajar Tailwind CSS #26 Functions and directives

27. Belajar Tailwind CSS #27 Preflight Tailwind CSS

28. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS

29. Belajar Tailwind CSS #29 Tailwind CSS columns

30. Belajar Tailwind CSS #30 Tailwind CSS Break-After

31. Belajar Tailwind CSS #31 Tailwind CSS Break-Before

32. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS

33. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS

34. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS

35. Belajar Tailwind CSS #35 Tailwind CSS Display

36. Belajar Tailwind CSS #36 Tailwind CSS Float

37. Belajar tailwind CSS #37 Tailwind CSS Clear

38. Belajar Tailwind CSS #38 Tailwind CSS Isolation

39. Belajar Tailwind CSS #39 Tailwind CSS Object-fit

40. Belajar Tailwind CSS #40 Tailwind CSS Object-position

41. Belajar Tailwind CSS #41 Overflow Tailwind CSS

42. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior

43. Belajar Tailwind CSS #43 Tailwind CSS Position

44. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left

45. Belajar Tailwind CSS #45 Visibility di Tailwind CSS

46. Belajar Tailwind CSS #46 Z-index di Tailwind CSS

47. Belajar Tailwind CSS #47 Tailwind CSS flex-basis

48. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS

49. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS

50. Belajar Tailwind CSS #50 Flex Tailwind CSS

51. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS

52. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS

53. Belajar Tailwind CSS #53 Tailwind CSS order

54. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS

55. Belajar Tailwind CSS #55 Grid-column Tailwind CSS

56. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS

57. Belajar Tailwind CSS #57 Grid-row Tailwind CSS

58. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS

59. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS

60. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS

61. Belajar Tailwind CSS #61 Gap di Tailwind CSS

62. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS

63. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS

64. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS

65. Belajar Tailwind CSS #65 Align-content di Tailwind CSS

66. Belajar Tailwind CSS #66 Align-items di Tailwind CSS

67. Belajar Tailwind CSS #67 Align-self di Tailwind CSS

68. Belajar Tailwind CSS #68 Place-content di Tailwind CSS

69. Belajar Tailwind CSS #69 Tailwind CSS place-items

70. Belajar Tailwind CSS #70 Tailwind CSS place-self

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya